When we need a rule, we can't do it every time the DOM changes, otherwise it's too inefficient.
The CSS rules in DOM can also be modified. However, different browsers for the CSS rules of the interface description is also different, where IE in the same way as hash table, and FF in array mode.
From the programmability, IE interface description is more pleasing to programmers, but logically, FF is obviously more reasonable.
I have provided a way to simply package two sets of code similar to IE, but after the CSS removerule of the DOM, ie cannot be sure to cash the rules synchronously. So it's best to use rules to cover the way rather than remove.
Note that when you use the Change JS function, the page must have at least one style label. Here's the code and the example.
Copy Code code as follows:
<style>
#a:
{
Color:blue;
}
</style>
<style>
#a:
{
Background:gray;
}
</style>
<script>
function Addcssrule (key,value) {
var css = document.stylesheets[document.stylesheets.length-1];
Css.cssrules?
(Css.insertrule (key+ "{" +value+ "}", Css.cssRules.length)):
(Css.addrule (Key,value));
}
function Removecssrule (key) {
for (var i = 0; i < document.styleSheets.length; i++) {
var css = document.stylesheets[i];
Css.cssrules?
(function () {
for (var j = 0; J < Css.cssRules.length; J + +) {
if (Css.cssrules[j].selectortext==key) {
Css.deleterule (j);
}
}
})() :
(Css.removerule (key));
}
}
</script>
<div id= "a" >
Abc
</div>
<button onclick= ' Addcssrule ("#a", "Color:red;background:yellow;") ' >
Add</button>
<button onclick= ' Removecssrule ("#a") ' >
Remove</button>
