Javascript 动态更改样式表规则选择器

这是如何动态更改选择器规则的简化版本：

对于给定者内联样式：

<style type='text/css' id='myStyle'>
    ul > li{}
</style>

var styleTag = document.querySelector('#myStyle');
// the style sheet in the style tag
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet,
    rules = sheet.cssRules ? sheet.cssRules : sheet.rules;

if( sheet.cssRules ){
    sheet.deleteRule(0); // deletes a rule at index 0
    sheet.insertRule("ul > li:nth-child(2n){background:red}", 0);
}
else{
    sheet.removeRule(0); // deletes a rule at index 0
    sheet.addRule("ul > li:nth-child(2n)", 'background:red', 0);
}

也不

selectorText

或

cssText

工作以手动设置选择器

然后我在MDN上读到，

selectorText

是只读的，我不知道如何在不删除整个样式元素并创建新的样式元素的情况下实际更改选择器。 可以选择完全删除规则并插入新规则，但这是非常不标准的。有什么想法吗？

演示-

跨浏览器方式：

<style type='text/css' id='myStyle'>
    ul > li{}
</style>

var styleTag = document.querySelector('#myStyle');
// the style sheet in the style tag
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet,
    rules = sheet.cssRules ? sheet.cssRules : sheet.rules;

if( sheet.cssRules ){
    sheet.deleteRule(0); // deletes a rule at index 0
    sheet.insertRule("ul > li:nth-child(2n){background:red}", 0);
}
else{
    sheet.removeRule(0); // deletes a rule at index 0
    sheet.addRule("ul > li:nth-child(2n)", 'background:red', 0);
}

---

如果只有一个样式规则，那么这很好，但这有多普遍？一般来说，如果有许多索引是动态的，那么很难跟踪哪个索引是哪个规则。默认情况下不命名规则，并且似乎没有命名规则的规定。我看到的唯一命名方案是为每个动态规则创建一个单独的样式表，带有一个id，然后这种技术就可以正常工作了。@Victoria-所以您可以删除所有规则并重新插入。如果你有10条规则，只需循环并删除10次..这是我现在能想到的唯一解决方案是的，如果所有10条规则都已知，并且在一个已知的样式块中，那就行了。不过，模块化代码可能不知道所有10条规则。因此，在一个单独的标记中为每个规则指定一个名称可能更容易以模块化的方式进行管理。@Victoria-我不知道你在说什么。.我在一个jQuery插件中使用我的代码，该插件可以毫无问题地处理多个实例。你根本不需要知道规则，它是一个数组，你只需删除所有项目并添加你想要的任何内容。是的，它只是一个数组，只要你在某个地方保留了整个数组的副本，这样你就可以“在样式表外”对其进行编辑，然后你就可以按照你说的做，只需删除所有旧项目并从数组中添加所有当前项目。如果几个不同的模块试图维护它们自己的样式表子集，那么知道哪些规则是重要的，并且很难。。。因此，每个模块最好保留自己的样式表（使用自己的名称）。这能让我的评论更清楚吗？