javascript

Chapter 11: DOM Levels 2 and 3
function insertRule(sheet, selectorText, cssText, position){
if (sheet.insertRule){
sheet.insertRule(selectorText + “{“ + cssText + “}”, position);
} else if (sheet.addRule){
sheet.addRule(selectorText, cssText, position);
}
}
This function can then be called in the following way:
insertRule(document.styleSheets[0], “body”, “background-color: silver”, 0);
Although adding rules in this way is possible, it quickly becomes burdensome when the number of rules
to add is large. In that case, it ’ s better to use the dynamic style loading technique discussed in Chapter 10 .
Opera prior to version 9.5 doesn ’ t always insert the new rule in the correct location.
Unfortunately, there ’ s no complete workaround for these early Opera versions.
Deleting Rules
The DOM method for deleting rules for a style sheet is deleteRule() , which accepts a single
argument: the index of the rule to remove. To remove the first rule in a style sheet, the following code
can be used:
sheet.deleteRule(0);
//DOM method
IE supports a method called removeRule() that is used in the same way, as shown here:
sheet.removeRule(0);
//IE only
The following function handles deleting a rule in a cross - browser way. The first argument is the style
sheet to act on, and the second is the index to delete, as shown in the following example:
function deleteRule(sheet, index){
if (sheet.deleteRule){
sheet.deleteRule(index);
} else if (sheet.removeRule){
sheet.removeRule(index);
}
}
This function can be used as follows:
deleteRule(document.styleSheets[0], 0);
As with adding rules, deleting rules is not a common practice in web development and should be used
carefully because the cascading effect of CSS can be affected.
335