更新

Question

如何通过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的规则。我希望这次编辑是正确的。）

Answer 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/

Answer 2

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

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

<profile>
<properties>
<nexus.host>http://localhost:8081/nexus/content/repositories</nexus.host>
</properties>
</profile>

如果你觉得这有点讨厌，那就会变得更糟！

更新

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

以下作品（updated JSFiddle）...

<distributionManagement>
        <snapshotRepository>
            <id>my-snapshots</id>
            <name>my snapshots</name>
            <url>${nexus.path}/snapshots</url>
        </snapshotRepository>
        <repository>
            <id>my-releases</id>
            <name>my releases</name>
            <url>${nexus.path}/releases</url>
        </repository>
    </distributionManagement>

通过JavaScript删除CSS规则

2 个答案:

更新