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

我需要创建一些动态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);
  }

---

代码确实有效。请注意，当使用

CSSStyleSheet.insertRule（）

时，这些规则实际上会插入到样式表中，尽管它们不会显示在XML树中。另见：

在一个工作示例下面，我刚刚添加了一个示例数据集，并更改了css规则，以更好地证明该示例

let addCSSRule=函数（工作表、选择器、规则、索引）{
sheet.insertRule（选择器+“{”+规则+“}”，索引）；
};
让styleTagGenerator=函数（）{
让tag=document.createElement（'style'）；
tag.id='myskills\u dynamic\u style'；
tag.type='text/css'；
文件.头.子项（标签）；
};
let response={//示例对象
测试：“bada55”
};
for（让输入响应）{
设val=响应[键]；
让选择器='.progressbar bg span.progressbar-'+key+'；//删除：之后以更好地可视化它
let rule='background color:#'+val+'；//使用背景颜色而不是动画来更好地可视化背景颜色
让styleTag=document.getElementById（'myskills\u dynamic\u style'）.sheet；
addCSSRule（样式标签、选择器、规则、响应.长度）；
}

abc

我假设规则被添加到样式表对象中，但它们不会反映到标记中。另外，请注意，

addCSSRule

需要四个参数，但只传递三个。不过，这对执行没有影响。好吧，当检查源代码时，我可以看到头部出现了样式标记，但它没有向标记添加任何规则。没有在标记中看到任何反映，所以是的，您是正确的。这可能是因为您还可以通过样式表对象操纵链接的样式表，而链接元素没有内容。