是的getComputedStyle空

我在我的javascript代码下面一行：是的getComputedStyle空

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

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

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

即使在明确地设置HTML中的CSS时（例如，我的节点是<div style="width:100px;"></div>），CSSStyleDeclaration对象仍然是空的。

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

来源

2013-04-09 Martin Trigaux

_“我的节点尚未集成到DOM中”_--当然这是原因。不在DOM中的元素不值得花费昂贵的任务 - 因此没有计算风格来读取这样的元素。首先将它放入DOM中 - 如果需要，隐藏（不使用display：none，因为它与节点不在DOM中的效果基本相同）。 – CBroe 2013-04-09 13:41:52

但为什么它在Firefox中工作呢？不幸的是，我现在无法在应用程序的渲染过程中对其进行整合。 – 2013-04-09 13:45:10

它在Firefox，因为[它是真正费心去实现这个分离为节点的唯一浏览器（https://bugs.jquery.com/ticket/9338）。 – DarkDust 2016-03-17 16:29:48

如果你知道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));

来源

2014-03-27 17:32:44

是的getComputedStyle空

回答

相关问题