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

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);
}

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

是否只有在应用所有新规则后我才能继续执行？

Answer 1

据我所知，规则应用是同步的。我希望是对的，如果是这样的话，whis 会起作用:

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

希望这对您有所帮助。干杯