556661-1.html (2048B)
1 <!doctype html> 2 <html><head><title>Dynamic manipulation of !important</title> 3 <style> 4 div { float: left; width: 50px; height: 50px; margin: 5px } 5 div#control { 6 width: 230px; 7 background-color: green !important; 8 background-color: red; 9 } 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 } 18 p { clear: left } 19 </style> 20 <style> 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 } 29 </style> 30 <script> 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"); 37 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"); 46 } 47 </script> 48 <body> 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> 53 <p></p> 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> 58 <p></p> 59 <div id="control"></div> 60 <p>There should be two rows of four green squares and one solid green 61 bar above.</p> 62 </body> 63 </html>