Wed, 31 Dec 2014 07:16:47 +0100
Revert simplistic fix pending revisit of Mozilla integration attempt.
michael@0 | 1 | <!doctype html> |
michael@0 | 2 | <html><head><title>Dynamic manipulation of !important</title> |
michael@0 | 3 | <style> |
michael@0 | 4 | div { float: left; width: 50px; height: 50px; margin: 5px } |
michael@0 | 5 | div#control { |
michael@0 | 6 | width: 230px; |
michael@0 | 7 | background-color: green !important; |
michael@0 | 8 | background-color: red; |
michael@0 | 9 | } |
michael@0 | 10 | div#a { background-color: green } |
michael@0 | 11 | div#b { background-color: orange } |
michael@0 | 12 | div.c { background-color: orange } |
michael@0 | 13 | div#d { background-color: orange } |
michael@0 | 14 | div#e { background-color: green } |
michael@0 | 15 | div#f { background-color: orange } |
michael@0 | 16 | div.g { background-color: orange } |
michael@0 | 17 | div#h { background-color: orange } |
michael@0 | 18 | p { clear: left } |
michael@0 | 19 | </style> |
michael@0 | 20 | <style> |
michael@0 | 21 | div.a { background-color: red !important } |
michael@0 | 22 | div.b { background-color: red !important } |
michael@0 | 23 | div#c { background-color: red } |
michael@0 | 24 | div.d { background-color: red } |
michael@0 | 25 | div.e { background-color: red !important } |
michael@0 | 26 | div.f { background-color: red !important } |
michael@0 | 27 | div#g { background-color: red } |
michael@0 | 28 | div.h { background-color: red } |
michael@0 | 29 | </style> |
michael@0 | 30 | <script> |
michael@0 | 31 | window.onload = function() { |
michael@0 | 32 | var r = document.styleSheets[1].cssRules; |
michael@0 | 33 | r[0].style.setProperty("background-color", "yellow", ""); |
michael@0 | 34 | r[1].style.setProperty("background-color", "green", "important"); |
michael@0 | 35 | r[2].style.setProperty("background-color", "green", ""); |
michael@0 | 36 | r[3].style.setProperty("background-color", "green", "important"); |
michael@0 | 37 | |
michael@0 | 38 | r[4].style.removeProperty("background-color"); |
michael@0 | 39 | r[4].style.setProperty("background-color", "yellow", ""); |
michael@0 | 40 | r[5].style.removeProperty("background-color"); |
michael@0 | 41 | r[5].style.setProperty("background-color", "green", "important"); |
michael@0 | 42 | r[6].style.removeProperty("background-color"); |
michael@0 | 43 | r[6].style.setProperty("background-color", "green", ""); |
michael@0 | 44 | r[7].style.removeProperty("background-color"); |
michael@0 | 45 | r[7].style.setProperty("background-color", "green", "important"); |
michael@0 | 46 | } |
michael@0 | 47 | </script> |
michael@0 | 48 | <body> |
michael@0 | 49 | <div class="a" id="a"></div> |
michael@0 | 50 | <div class="b" id="b"></div> |
michael@0 | 51 | <div class="c" id="c"></div> |
michael@0 | 52 | <div class="d" id="d"></div> |
michael@0 | 53 | <p></p> |
michael@0 | 54 | <div class="e" id="e"></div> |
michael@0 | 55 | <div class="f" id="f"></div> |
michael@0 | 56 | <div class="g" id="g"></div> |
michael@0 | 57 | <div class="h" id="h"></div> |
michael@0 | 58 | <p></p> |
michael@0 | 59 | <div id="control"></div> |
michael@0 | 60 | <p>There should be two rows of four green squares and one solid green |
michael@0 | 61 | bar above.</p> |
michael@0 | 62 | </body> |
michael@0 | 63 | </html> |