JavaScript stylesheet.insertRule不插入规则，但不返回错误或异常

Question

我需要创建一些动态CSS并尝试使用insertRule。我正在创建一个样式标签，然后尝试在循环中使用insertRule创建许多规则。

发生了什么：样式标签已生成并添加到头部，标签中未插入任何规则。控制台中没有错误。

这里是相关代码：

let addCSSRule = function(sheet, selector, rules, index) {
        sheet.insertRule(selector + "{" + rules + "}", index);
    };

    let styleTagGenerator = function() {
        let tag = document.createElement('style');
        tag.id = 'myskills_dynamic_style';
        tag.type = 'text/css';
        document.head.appendChild(tag);
    };

然后在循环中调用addCSSRule函数。我玩过索引：

for(let key in response) {
     let val = response[key];
      let selector = '.progressbar-bg span.progressbar-' + key + ':after';
      let rule = 'animation-name: pb-' + val + '-after';
      let styleTag = document.getElementById('myskills_dynamic_style').sheet;
                        addCSSRule(styleTag, selector, rule);
  }

Answer 1

该代码确实有效。请注意，使用CSSStyleSheet.insertRule()时，规则实际上已插入样式表中，尽管它们未显示在XML树中。另请参见：https://stackoverflow.com/a/28930990/2692307

在一个有效的示例下面，我刚刚添加了一个示例数据集，并更改了CSS规则以更好地证明该示例。

let addCSSRule = function(sheet, selector, rules, index) {
        sheet.insertRule(selector + "{" + rules + "}", index);
    };

let styleTagGenerator = function() {
    let tag = document.createElement('style');
    tag.id = 'myskills_dynamic_style';
    tag.type = 'text/css';
    document.head.appendChild(tag);
};

let response = { // Example object
  test: 'bada55'
};

for(let key in response) {
    let val = response[key];
    let selector = '.progressbar-bg span.progressbar-' + key + ''; // Removed :after to visualize it better
    let rule = 'background-color: #' + val + ''; // Use bg-color instead of animation to visualize it better
    let styleTag = document.getElementById('myskills_dynamic_style').sheet;
    addCSSRule(styleTag, selector, rule, response.length);
}

<style id="myskills_dynamic_style"></style>

<div class="progressbar-bg">
  <span class="progressbar-test">abc</span>
</div>