Question

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

对于内联提供者风格：

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

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

1 个答案: