chrome中的节点的getComputedStyle为空

Question

我的javascript代码中包含以下行：

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

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

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

即使在HTML偏好中显式设置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));