Question

假设我有一个字符串表示我想要动态添加到文档中的一堆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事件，不是吗？

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

Answer 1

据我所知，规则设备是同步的。我希望是对的，如果是这样的话，你会工作：

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

希望这会有所帮助。干杯

Answer 2

添加样式标记后，浏览器会重建stylesheet tree和reflow/repaint必需的layers，但这不会阻止user I/O javascript执行的位置。所以样式和脚本将应用异步。

但是如果您要更改样式表规则中任何DOM元素的大小，则javascript将为blocked，而浏览器引擎会重新计算新大小。

在向文档动态添加CSS规则时等待应用样式

2 个答案: