我正在尝试根据它的 CSS 规则获取元素的宽度问题是“getComputedStyle”对于没有设置 CSS 宽度值的元素返回一个像素值而不是“自动”。在 Opera 中，“elem.currentStyle['width']”返回“auto”，但在 Firefox 中，它必须使用“getComputedStyle”返回类似“1149px”的内容。
了解实际的 CSS 规则是什么对我来说至关重要。除了 getComputedStyle 之外，还有其他方法吗？ The Firefox MDN 明确表示“getComputedStyle”不是要走的路，但我找不到任何与“currentStyle”等效的 Firefox 文档。
如果你想知道，我的最终目标是找到页面上最大的静态宽度元素。 如果我无法读取样式表值 - 仅呈现/计算值 - 那么我该如何实现呢？
【问题讨论】：
标签： javascript firefox computed-style
不幸的是，据我所知，没有现实的方法可以实现这一目标。
编辑：上面循环遍历样式表的答案是您最好的选择。我最初想访问样式表，但没有想到使用 querySelectorAll。向弗拉基米尔致敬，感谢他的天才解决方案。
--
我能想到的唯一解决方案是为您设置宽度的元素，同时将一些其他不常用的样式设置为不会真正影响任何东西的东西，因此您可以对此进行测试。
div {
width: 35px;
min-width: 1px; /* the flag */
}
那么在查找指定宽度的元素时，可以先查找[ComputedStyle].minWidth == '1px'。
相当老套的解决方案，但它可以完成工作。
您还可以为具有设置宽度的元素设置一个随机类名，然后您所要做的就是查询具有该类名的元素。虽然这不是一个非常动态的解决方案。
【讨论】：
如果您从一个元素开始，则无法知道应用了哪些样式表规则。 getComputedStyle() 只是为您提供了有效的样式值，currentStyle 并没有太大的不同，即使它恰好在此特定场景和此特定浏览器中为您提供了您期望的结果。
您可能需要做的是浏览样式表。大致如下：
for (var i = 0; i < document.styleSheets.length; i++)
{
var styleSheet = document.styleSheets[i];
for (var j = 0; j < styleSheet.cssRules.length; j++)
{
var rule = styleSheet.cssRules[j];
if (rule.type == 1) // STYLE_RULE
{
// Do something with rule.style.width
}
}
}
如果您随后需要定位与该规则匹配的元素，您可以使用document.querySelectorAll() 和rule.selectorText。剩下的问题是多个样式规则可能适用于同一个元素，并且需要计算规则的特异性。不过，不确定这对您有多大影响。
其他文档：
【讨论】：
如果你只想获取元素的尺寸，为什么不使用
element.clientWidth 或 element.clientHeight
getcomputestyle 并非旨在检索元素的宽度或高度
【讨论】：