jQuery .css("left") 在 Chrome 中返回 "auto" 而不是实际值答案

【问题标题】：jQuery .css("left") returns "auto" instead of actual value in ChromejQuery .css("left") 在 Chrome 中返回 "auto" 而不是实际值
【发布时间】：2011-05-15 18:09:23
【问题描述】：

我有定义了 left 和 top 的 div 元素，没有绝对位置，我想使用 jQuery 读取 left 和 top 值。

使用$("#MyId").css("left") 在 IE 浏览器 (IE8) 中给出了预期的结果，但在 Chrome 中它返回了“auto”，尽管这些值以元素样式显式写入。

这是测试用例： http://jsfiddle.net/qCDkb/2/

注意 IE 和 Chrome 的区别。

此外，这在 jQuery 1.4.2 中运行良好，而在 jQuery 1.4.3 及更高版本中“失败”。

欢迎任何见解。 :-)

【问题讨论】：

按道理返回auto 是正确的行为，因为position: static 不听left 属性。
正如此处验证的那样，请注意该位置现在位于左侧 150 像素处。 jsfiddle.net/qCDkb/3位置：相对添加到css。
@Pekka - 我不想要实际位置，为此我可以使用 .position().left - 我在 CSS 中为该元素定义的值之后..
似乎是对 css 的滥用。您应该为此使用 data() 。 api.jquery.com/jQuery.data
@Gazler - 我不想将元素实际定位到左侧 150 像素。我希望这些值仅作为“标志”以供以后使用。可能是错误的方法.. :/

标签： jquery css

【解决方案1】：

试试$("your selector").position().top;

【讨论】：

您可以自己查看in the fiddle。不工作，总是返回 0，因为它返回实际位置，而我想读取我为元素内联定义的值。
在 Chrome 和 FF 中为我工作。
注意“渲染”序列在这里也起作用stackoverflow.com/questions/1324568/…

【解决方案2】：

对于 jQuery，这是一种奇怪的行为。但是你可以使用原生 javascript 方法来获取 css 值：

$("#Panel1")[0].style.left

这个表达式会返回对应的css属性。

【讨论】：

这仅适用于内联 CSS。正确的方法在这里stackoverflow.com/a/20733569/607874

【解决方案3】：

正如 cmets 中所讨论的，将 position: static 设置为 left 到 auto 听起来有点正确，因为 left 在上下文中没有任何意义。

为什么 Chrome 和 IE 返回不同的值：.css() 为浏览器计算样式功能提供了一个统一的网关，但它并没有统一浏览器实际计算样式的方式。浏览器以不同方式决定这种边缘情况的情况并不少见。

至于为什么 jQuery 1.4.2 和 1.4.3 这样做不同，我不确定，但是1.4.3's release notes 中有这个：

几乎整个 CSS 模块都被重写，完全专注于可扩展性。您现在可以编写自定义 CSS 插件来扩展 .css() 和 .animate() 提供的功能。

【讨论】：

谢谢，这似乎是我能得到的最好的解释。 :-)
读取属性前需要隐藏元素。在这里查看stackoverflow.com/a/20733569/607874

【解决方案4】：

添加

position: absolute;

或

position: relative;

到你在左边使用的元素

【讨论】：

我知道，关键是元素不能有这个。（这就是为什么“没有绝对位置”在问题中以粗体显示）
呵呵，显然不够大胆。我的坏

【解决方案5】：

我知道这是一篇旧帖子，但我遇到了同样的问题，并认为我会提出几个解决方案。这个问题似乎不是 Chrome 特有的，因为我也能够在 Firefox 中重现。

我能够通过两种方法之一来解决这个问题。将 CSS 样式放在与 HTML 相同的文件中，而不是使用单独的 CSS 文件。或者，调用 window.onload 中的函数。如果样式在外部样式表中，则在加载所有内容之前，这些值似乎对浏览器不可用。

希望这有帮助。

【讨论】：