Question

我的javascript代码中有以下行：

if(document.defaultView && document.defaultView.getComputedStyle){
    strValue = document.defaultView.getComputedStyle(oElm).getPropertyValue(strCssRule);
} // ...

检索我的节点的CSS值（例如：strCssRule = 'color'）。它适用于Firefox。它仅适用于Chrome上的静态页面上的简单示例。尝试将其集成到复杂的应用程序中时，返回的CSSStyleDeclaration的每个字段都为空。

使用jQuery（oElem）检索节点oElem = $(my_selector).empty().get(0));。工作示例和我的应用程序之间的差异（至少是我能想到的唯一一个）是我的节点在计算时尚未集成到DOM中（仍然生成完整的HTML）。

我甚至在HTML delectation中明确设置CSS时尝试过（例如我的节点是<div style="width:100px;"></div>），CSSStyleDeclaration对象仍为空。

编辑：正如提到的CBroe，问题是该元素尚未链接到DOM。我想这取决于浏览器的实现如何处理这种情况。我不知道firefox是如何使它有效的，但我会找到别的东西。

Answer 1

如果您知道CSS规则的选择器，并且您知道它是在CSS工作表中定义的，则可以搜索它。这就是我解决这个问题的方法。

var page, rule, css;
var selector = ".my_selector";
var sheets = document.styleSheets;
for( page = 0; page < sheets.length; page++ ){
    // if you comment out this if-statement, you can search thru all of the page-wide stylesheets
    if( sheets[page].href.match(/.*\/filename\.css$/) ){
        for( rule = 0; rule < sheets[page].length; rule++ ){
            if( sheets[page][rule].selectorText === selector ){
                css = sheets[page][rule].style;
                break;
            }
        }
        break;
    }
}

// At this point, you have access to the CSS you're looking for.

console.log(css);
alert(css.backgroundColor);

// example from actual code:

if(css.borderTopWidth)this.speaker_default.edge._sizediff=Number(css.borderTopWidth.slice(0,-2));

chrome中节点的getComputedStyle为空

1 个答案: