javascript - 查询 css 类的属性值，即使未使用

Question

在这种情况下，我想知道定义为“foo”的 css 类的“宽度”属性的值(例如:“.foo {width:200px}”)。

但是，在 dom 中可能实际上(还)不存在具有所述类的元素。

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

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

有什么办法吗？ (没有像在屏幕外渲染 div，然后查询它们的类属性这样的技巧)。

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

Answer 1

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

但是有一个更简洁的解决方案，如在 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

        }
    }
}

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