查询css类的属性值，即使不在使用中

Query property value of a css class even if not in use

本文关键字：css 属性 查询      更新时间：2023-09-26

我有一种情况，我想知道定义为"foo"的css类的"width"属性的值（例如：".foo｛width:200px｝"）。

然而，在dom中可能实际上（还）不存在具有所述类的元素。

我希望能够从Javascript访问这个值（计算设置复杂布局时其他div的百分比）。

我很确定答案是这可能是不可能的，但我认为这将是一个非常有用的功能，并将使设计/布局属性能够在CSS中有效地定义。

有办法做到这一点吗？（没有像在屏幕外渲染div，然后查询它们的类属性这样的技巧）。

也许它可以实现为一个标准的浏览器javascript库——可能是一个document.styles对象？因此，我的属性可以在javascript中找到："document.styles.foo.width"-我如何向w3c提交提案？

解决方案是创建一个元素，而不是将其添加到文档中。

但是有一个更干净的解决方案，因为在javascript中，您可以轻松地迭代样式表及其内容：

for (var i=0; i<document.styleSheets.length; i++) {
    var styleSheet = document.styleSheets[i];
    var cssRules = styleSheet.rules; // chrome, IE
    if (!cssRules) cssRules = styleSheet.cssRules; // firefox
    for (var ir=cssRules.length; ir-->0;) {
        var rule = this.cssRules[ir];
        if (rule.selectorText==".foo") {
              var width = parseInt(rule.style.getPropertyValue('width'), 10);
              // do what you want
        }
    }
}

当您在尚未解析的结构上迭代时，这是一个有效的解决方案。

相关文章：