currentStyle与getComputedStyle的火狐问题

Question

我正在尝试根据元素的CSS规则获取元素的宽度，问题是对于没有设置CSS width值的元素，"getComputedStyle“返回的是像素值，而不是"auto”。在歌剧中，“elem.currentStyle‘’width‘”返回"auto"，但在firefox中，它必须使用"getComputedStyle“返回类似于"1149px”的内容。

知道什么是实际的CSS规则对我来说是至关重要的。除了getComputedStyle之外，还有什么方法可以做到这一点吗？The Firefox MDN明确表示"getComputedStyle“不是可行的方法，但我找不到任何与"currentStyle”等同的火狐文档。

如果您想知道，我的最终目标是找到页面上最大的静态宽度元素。如果我不能读取样式表值--仅呈现/计算出的值--那么我该如何实现呢？

Answer 1

如果从元素开始，就无法知道对其应用了哪些样式表规则。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。剩下的问题是，多个样式规则可能应用于相同的元素，并且需要计算规则的特异性。然而，我不确定这对你来说有多大的问题。

其他文档：

• CSSStyleSheet
• CSSStyleRule

Answer 2

如果您只想获得元素的维度，为什么不使用

element.clientWidth或element.clientHeight

getcomputestyle不是用来检索元素的宽度或高度的