Question

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

了解实际的CSS规则至关重要。除了getComputedStyle之外还有其他一些方法吗？ The 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一起使用。剩下的问题是多个样式规则可能适用于同一个元素，并且需要计算规则的特异性。但是不确定这对你来说有多大问题。

其他文件：

Answer 2

~~不幸的是，据我所知，没有切实可行的方法来实现这一目标。~~

编辑：上面的答案循环通过样式表是你最好的选择。我最初想过访问样式表但没想到使用querySelectorAll。为了天才的解决方案，向弗拉迪米尔致敬。

-

我能想到的唯一解决方案是为你设置宽度的元素，还将其他一些不常用的样式设置为不会影响任何东西的东西，所以你可以测试它。

div {
    width: 35px;
    min-width: 1px; /* the flag */
    }

那么当寻找具有指定宽度的元素时，您可以首先查找[ComputedStyle] .minWidth =='1px'。

相当糟糕的解决方案，但它会完成工作。

您还可以为具有设置宽度的元素设置随机类名，然后您只需要查询具有该类名的元素。虽然这不是一个非常动态的解决方案。

Answer 3

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

element.clientWidth或element.clientHeight

getcomputestyle不是为了检索元素的宽度或高度而设计的

Firefox问题与currentStyle vs getComputedStyle

3 个答案: