Firefox关于currentStyle vs getComputedStyle的问题

Firefox issue with currentStyle vs getComputedStyle

本文关键字：问题 getComputedStyle vs 关于 currentStyle Firefox      更新时间：2023-09-26

我试图根据它的CSS规则得到一个元素的宽度问题是，"getComputedStyle"返回一个像素值而不是"auto"的元素没有CSS宽度值设置。在Opera中，"elem"。currentStyle['width']"返回"auto"，但在firefox中，它必须使用"getComputedStyle"返回类似"1149px"的东西。

了解实际的CSS规则对我来说是至关重要的。除了getComputedStyle之外还有别的方法吗?Firefox的MDN清楚地表明"getComputedStyle"不是正确的方法，但是我找不到任何与"currentStyle"等价的Firefox文档。

如果你想知道，我的最终目标是找到页面上最大的静态宽度元素。如果我不能读取样式表值-只能读取呈现/计算值-那我怎么才能做到呢?

如果从元素开始，则无法知道应用于该元素的样式表规则。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

不幸的是，据我所知，没有现实的方法来实现这一点。

编辑:上面的答案循环遍历样式表是你最好的选择。我最初想到访问样式表，但没有想到使用querySelectorAll。向弗拉基米尔致敬，他想出了一个天才的解决方案。

,

我能想到的唯一解决办法是，对于你要设置宽度的元素，也设置一些其他不常用的样式，不会真正影响任何东西，所以你可以测试。

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

因此，当查找具有指定宽度的元素时，您可以查找[ComputedStyle]。minWidth == '1px' first

这是一个相当粗糙的解决方案，但它会完成工作。

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

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

element.clientWidth或element.clientHeight

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

相关文章：