[英]Remove CSS rules by JavaScript
How to remove CSS rules by JavaScript?如何通过 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;
}
}
here is an example how you can do this:这是一个如何执行此操作的示例:
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);
}
}
}
While it is possible to edit the stylesheet programatically , it comes with a host of browser problems.虽然可以以编程方式编辑样式表,但它带来了许多浏览器问题。
Here is how you obtain the rules from a stylesheet:以下是从样式表中获取规则的方法:
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;
}
And if you think that's a bit nasty, it gets worse from there!如果你认为这有点讨厌,那就更糟了!
I can see the question has been edited...我可以看到问题已被编辑...
The following works ( updated JSFiddle )...以下作品(更新的 JSFiddle )...
if (selector === '#rule2 em') {
rule.style.color = 'black';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.