5

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

了解实际的 CSS 规则是什么对我来说至关重要。除了 getComputedStyle 之外，还有其他方法吗？Firefox MDN明确表示“getComputedStyle”不是要走的路，但我找不到任何与“currentStyle”等效的 Firefox 文档。

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

4

3 回答 3

4

如果您从一个元素开始，则无法知道应用了哪些样式表规则。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()with rule.selectorText。剩下的问题是多个样式规则可能适用于同一个元素，并且需要计算规则的特异性。但是，不确定这对您来说有多大的问题。

附加文件：

于 2011-08-29T07:16:48.080 回答
1

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

编辑：通过样式表循环的上述答案是您最好的选择。我最初想访问样式表，但没有想到使用 querySelectorAll。向弗拉基米尔致敬，寻求一个天才的解决方案。

--

我能想到的唯一解决方案是为您设置宽度的元素，还将一些其他不常用的样式设置为不会真正影响任何东西的东西，因此您可以对此进行测试。

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

那么在查找指定宽度的元素时，可以先查找 [ComputedStyle].minWidth == '1px' 。

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

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

于 2011-08-29T05:29:08.927 回答
0

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

element.clientWidth或者element.clientHeight

getcomputestyle 并非旨在检索元素的宽度或高度

于 2011-08-29T04:56:11.830 回答