3

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

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

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

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

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

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

4

1 回答 1

3

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

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

        }
    }
}

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

于 2012-07-11T11:25:53.013 回答