Note: Some of the example code shown below is not the full code being executed. To make things as simple as possible I wanted to just show the critical code pertaining to style manipulation, thus the code that deals with browser differences is not shown. To see the full code one can view the source code.
This example demonstrates how to add and remove rules from a style element.
CSS rules of our style sheet. Numbered starting at zero in cssRules
some text in a P tag
<style title="e3_style"> .not-applied-class1 { border: 2px solid black; } .not-applied-class2 { font-size: 15px; } .not-applied-class3 { background-color: blue; } .not-applied-class4 { margin: 10px; } </style>
var e3_style_on = false; function getStyleSheet() { for(var i=0; i<document.styleSheets.length; i++) { var sheet = document.styleSheets[i]; if(sheet.title == 'e3_style') { return sheet; } } } var rule_sheet = getStyleSheet(); function changeText() { if(!e3_style_on) { rule_sheet.insertRule("p { color: red;}", 2); } e3_style_on = true; showRules(); } function resetText() { if(e3_style_on) { rule_sheet.deleteRule(2); } e3_style_on = false; showRules(); }
Note: IE does not implement rules according to the standard.
Instead of the attribute cssRules
it uses rules
; IE also uses removeRule
instead of deleteRule
and
addRule(selector, rule, index)
instead of insertRule
.