<!
doctype html>
<
html><
head><
title>Dynamic manipulation of !important</
title>
<
style>
div { float: left; width: 50px; height: 50px; margin: 5px }
div#control {
width: 230px;
background-color: green !important;
background-color: red;
}
div#a { background-color: green }
div#b { background-color: orange }
div.c { background-color: orange }
div#d { background-color: orange }
div#e { background-color: green }
div#f { background-color: orange }
div.g { background-color: orange }
div#h { background-color: orange }
p { clear: left }
</
style>
<
style>
div.a { background-color: red !important }
div.b { background-color: red !important }
div#c { background-color: red }
div.d { background-color: red }
div.e { background-color: red !important }
div.f { background-color: red !important }
div#g { background-color: red }
div.h { background-color: red }
</
style>
<
script>
window.onload = function() {
var r = document.styleSheets[1].cssRules;
r[0].
style.setProperty(
"background-color",
"yellow",
"");
r[1].
style.setProperty(
"background-color",
"green",
"important");
r[2].
style.setProperty(
"background-color",
"green",
"");
r[3].
style.setProperty(
"background-color",
"green",
"important");
r[4].
style.removeProperty(
"background-color");
r[4].
style.setProperty(
"background-color",
"yellow",
"");
r[5].
style.removeProperty(
"background-color");
r[5].
style.setProperty(
"background-color",
"green",
"important");
r[6].
style.removeProperty(
"background-color");
r[6].
style.setProperty(
"background-color",
"green",
"");
r[7].
style.removeProperty(
"background-color");
r[7].
style.setProperty(
"background-color",
"green",
"important");
}
</
script>
<
body>
<
div class=
"a" id=
"a"></
div>
<
div class=
"b" id=
"b"></
div>
<
div class=
"c" id=
"c"></
div>
<
div class=
"d" id=
"d"></
div>
<p></p>
<
div class=
"e" id=
"e"></
div>
<
div class=
"f" id=
"f"></
div>
<
div class=
"g" id=
"g"></
div>
<
div class=
"h" id=
"h"></
div>
<p></p>
<
div id=
"control"></
div>
<p>There should be two rows of four green squares and one solid green
bar above.</p>
</
body>
</
html>
