2 <html><head><title>Dynamic manipulation of !important
</title>
4 div { float: left; width:
50px; height:
50px; margin:
5px }
7 background-color: green !important;
10 div#a { background-color: green }
11 div#b { background-color: orange }
12 div.c { background-color: orange }
13 div#d { background-color: orange }
14 div#e { background-color: green }
15 div#f { background-color: orange }
16 div.g { background-color: orange }
17 div#h { background-color: orange }
21 div.a { background-color: red !important }
22 div.b { background-color: red !important }
23 div#c { background-color: red }
24 div.d { background-color: red }
25 div.e { background-color: red !important }
26 div.f { background-color: red !important }
27 div#g { background-color: red }
28 div.h { background-color: red }
31 window
.onload = function() {
32 var r
= document
.styleSheets
[1].cssRules
;
33 r
[0].style
.setProperty("background-color", "yellow", "");
34 r
[1].style
.setProperty("background-color", "green", "important");
35 r
[2].style
.setProperty("background-color", "green", "");
36 r
[3].style
.setProperty("background-color", "green", "important");
38 r
[4].style
.removeProperty("background-color");
39 r
[4].style
.setProperty("background-color", "yellow", "");
40 r
[5].style
.removeProperty("background-color");
41 r
[5].style
.setProperty("background-color", "green", "important");
42 r
[6].style
.removeProperty("background-color");
43 r
[6].style
.setProperty("background-color", "green", "");
44 r
[7].style
.removeProperty("background-color");
45 r
[7].style
.setProperty("background-color", "green", "important");
49 <div class=
"a" id=
"a"></div>
50 <div class=
"b" id=
"b"></div>
51 <div class=
"c" id=
"c"></div>
52 <div class=
"d" id=
"d"></div>
54 <div class=
"e" id=
"e"></div>
55 <div class=
"f" id=
"f"></div>
56 <div class=
"g" id=
"g"></div>
57 <div class=
"h" id=
"h"></div>
59 <div id=
"control"></div>
60 <p>There should be two rows of four green squares and one solid green