【问题标题】：Remove CSS rules by JavaScript通过 JavaScript 删除 CSS 规则
【发布时间】：2015-07-07 19:26:07
【问题描述】：

如何通过 JavaScript 去除 CSS 规则？

var elStyle = document.querySelector('style#the-style');
var stylesheet = elStyle.sheet;
var rules = stylesheet.cssRules;
for (var i=0; i<rules.length; i++) {
  var rule = rules[i];
  if (rule.selectorText === '#rule2 em') {
    // TODO: remove this rule
    break;
  }
}

http://jsfiddle.net/e3zebmqv/

我成功删除了rule.style.color='' 的样式，但规则仍然存在。是否有要删除的 API？还是应该使用innerHTML？

更新

在这种情况下，我想删除样式规则，而不是 style properties。

（我不太了解 Stack Overflow 的规则，希望这次编辑是对的。）

【问题讨论】：

how to remove css property using javascript?的可能重复
我建议将您的 CSS 规则更改为类，并在您想要更改其属性时简单地替换该类。这样您就不会弄乱 ID，并且可以控制 CSS 类的输出。
@VladBardalez 我添加了一个解释。可以吗？
@iamjpg 我正在写一种析构函数。在这种情况下，改变风格不是我的目标。

标签： javascript css

【解决方案1】：

下面是一个例子：

var styleTag = document.getElementById ("the-style");
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

if (sheet.cssRules) { // all browsers, except IE before version 9
    for (var i=0; i<sheet.cssRules.length; i++) {
        if (sheet.cssRules[i].selectorText === '#rule2 em') {        
            //console.log(sheet.cssRules[i]);
            sheet.deleteRule (i);
        }
    }  
}
else 
{  // Internet Explorer before version 9
    for (var i=0; i<sheet.rules.length; i++) {
        if (sheet.rules[i].selectorText === '#rule2 em') {        
            // console.log(sheet.cssRules[i]);
            sheet.removeRule (i);
        }
    } 
}

在 JSFiddle http://jsfiddle.net/n53u7cvm/1/

【讨论】：

deleteRule() 是我正在寻找的。谢谢。

【解决方案2】：

虽然它是possible to edit the stylesheet programatically，但它带来了许多浏览器问题。

以下是从样式表中获取规则的方法：

var rules = new Array();
if (document.styleSheets[1].cssRules) {
    rules = document.styleSheets[1].cssRules;
}
else if (document.styleSheets[1].rules) {
    rules = document.styleSheets[1].rules;
}

如果你觉得这有点恶心，那就更糟了！

更新

我可以看到问题已被编辑...

以下作品（updated JSFiddle）...

if (selector === '#rule2 em') {
    rule.style.color = 'black';
}

【讨论】：

我没有检查旧浏览器。 .rules 喜欢你的代码是必需的。谢谢。