当动态添加CSS规则到文档时等待样式被应用

说我有一个字符串表示我想动态添加到文档的一堆CSS规则。这样的事情会做的伎俩：当动态添加CSS规则到文档时等待样式被应用

function loadCssRules(rules, doc, callback) { 
    var styleElement = this.createElement("style", doc); 
    styleElement.type = 'text/css'; 

    if (styleElement.styleSheet) { 
    // IE < 11 
    styleElement.styleSheet.cssText = rules; 
    } else if (styleElement.sheet) { 
    // IE >= 11 
    styleElement.sheet.cssText = rules; 
    } else { 
    // Other browsers 
    styleElement.innerHTML = rules; 
    } 

    if (callback) { 
    styleElement.addEventListener('load', callback); 
    } 

    doc.getElementsByTagName("head")[0].appendChild(styleElement); 
}

然而，callback永远不会被调用。我想这是因为style元素不支持load事件，不是吗？

无论如何，只有在应用所有新规则后，我才能继续执行？

来源

2014-01-11 Albus Dumbledore

应用样式是同步的，没有什么可以等待？ – adeneo

@adeneo确定吗？你知道它是否在规范？有什么办法可以触发重新布局，所以我可以确定吗？你会发现，添加这些规则会改变整个文档的布局，并且由于我需要根据某些元素的尺寸进行定位，因此让某些元素具有* old *大小会成为问题。 –

据我所知，规则组件是同步的。我希望是正确的，如果是这样的话，威尔将工作：

function loadCssRules(rules, doc, callback) { 
    var styleElement = this.createElement("style", doc); 
    ...  
    styleElement.innerHTML = rules; 
    } 
    doc.getElementsByTagName("head")[0].appendChild(styleElement); 
    if (callback) { 
    callback(); 
    } 
}

希望这会有所帮助。干杯

来源

2014-01-11 20:46:34

那么，如果它是同步的，就不需要回调，实际上......谢谢。 –

在添加样式标签浏览器重建它stylesheet tree和reflow/repaint必要layers，但是这不会阻止user I/O在哪里呢JavaScript的执行。所以样式和脚本将应用异步。

但是，如果您将更改样式表规则中的任何DOM元素的大小，那么JavaScript将在blocked之间，同时浏览器引擎将重新计算新大小。

来源

2014-01-11 21:00:57 Pinal

当动态添加CSS规则到文档时等待样式被应用

回答

相关问题