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

Question

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

http://jsfiddle.net/vsync/SaQy6/

对于给予者内联样式:

<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,
    // the first rule in the style sheet
    rules = sheet.cssRules ? sheet.cssRules : sheet.rules;

rules[0].selectorText = 'ul > li:nth-child(2)';
rules[0].style.cssText = 'background:red';

selectorText 或 cssText 都无法动态设置选择器。

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

Answer 1

演示 - http://jsfiddle.net/vsync/SaQy6/6/

跨浏览器方式:

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