Firefox问题与currentStyle vs getComputedStyle

Question

我试图根据它的CSS规则获取元素的宽度问题是"getComputedStyle"为没有设置CSS宽度值的元素返回像素值而不是"auto".在Opera中,"elem.currentStyle ['width']"返回"auto",但在firefox中,它必须使用"getComputedStyle",返回类似"1149px"的内容.

了解实际的CSS规则至关重要.除了getComputedStyle之外还有其他一些方法吗？Firefox MDN明确表示"getComputedStyle"不是可行的方法,但我找不到任何类似于"currentStyle"的Firefox文档.

如果你想知道,我的最终目标是找到页面上最大的静态宽度元素.如果我无法读取样式表值 - 只有渲染/计算值 - 那么我该如何实现呢？

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. 剩下的问题是多个样式规则可能适用于同一元素，并且需要计算规则的特殊性。但不确定这对您来说有多大问题。

附加文档：

• CSS样式表
• CSS样式规则