javascript - 跨浏览器 `element.style.width` 的一致性

Question

如果我有一些HTML

<div id="container">
  <div class="foo" style="width:75%;">Bar!</div>
</div>

如果我写这个 JavaScript(假设 jQuery 是为了问题的好处)

alert( $("#container .foo")[0].style.width );

它应该提醒“75%”。此输出在所有“现代”浏览器中是否一致？如果不是，最流行的非标准浏览器(甚至 IE)有哪些将无法返回正确的值？

** 编辑 **

请!只有两个带问号的语句...这些是问题!

现在，让我添加一些有助于不误导答案的内容...

1. 我知道 element.style 可用于所有浏览器。
2. 我知道 element.style.width 也可用。
3. 使用 jQuery 1.3.2，调用 $("#container .foo").css('width') 会返回 "75%" 至少从 1.6.4 版本开始是不正确的(我们甚至超过了那个主要版本)；最新的 jQuery 版本现在总是输出以像素为单位的宽度。

因此，考虑到给定的 HTML，获取元素的 style.width 总是会在所有浏览器中返回真实的、声明的大小(即百分比)，或者是否存在任何流氓、非标准一个将返回以像素为单位的计算宽度？

Answer 1

是的，所有主流浏览器都支持它。好像here有一些针对旧 IE 版本的注释。

Here您可以在此版本的 DOM API 中找到所有可用的属性。

编辑

关于跨浏览器返回值的一致性...这取决于您，因为它返回仅通过此 API 归因的内容:如果您使用 %，您'会得到 %;如果你使用 em 你会得到 em 等等。

用其他方式是没有意义的。假设您在元素中应用了 70% 的宽度，并且假设引擎仅使用引擎盖下的像素值。因此它将在内部将该值转换为父级宽度像素数的 70%。一旦你 parent 的宽度改变了，存储在像素中的值就永远消失了，它将以另一个百分比值进行评估。

tl;dr - 只有按原样存储才有意义，所以你付出的就是你得到的。

我很确定这种行为。但为了确定，我在早期版本的 Chrome、Firefox、Opera 和 IE 8+ 上确认了这种行为。所以，老兄，保持平静并享受这个功能吧。