javascript

CHAPTER 8 ■ SCRIPTING CSS
330
• The numeric index of the new rule. We have that number on hand in the index, so
just pass that in, and we’re done.
Now let’s code a path for Internet Explorer to run. Its method, addRule(), takes three parameters:
the text for the selector, the text for the declarations, and the numeric index for where to insert the rule.
Simply pass in the values of selector, declarations, and index. It’s simple as can be:
function insertRule(element, selector, declarations, index) {
var sheet = element.sheet || element.styleSheet;
var rules = sheet.cssRules || sheet.rules;
if (typeof index === "string") {
index = findIndex(element, index);
}
if (typeof index !== "number") {
index = rules.length;
}
if (sheet.insertRule) {
sheet.insertRule(selector + "{" + declarations + "}", index);
} else if (sheet.addRule) {
sheet.addRule(selector, declarations, index);
}
}
Between the rules with the selectors "ul.blue a" and "ul.fuchsia a", let’s insert a new one to swap
the sprite from blue to fuchsia by calling insertRule() like so. Verify your work with Figure 8–11.
function insertRule(element, selector, declarations, index) {
var sheet = element.sheet || element.styleSheet;
var rules = sheet.cssRules || sheet.rules;
if (typeof index === "string") {
index = findIndex(element, index);
}
if (typeof index !== "number") {
index = rules.length;
}
if (sheet.insertRule) {
sheet.insertRule(selector + "{" + declarations + "}", index);
} else if (sheet.addRule) {
sheet.addRule(selector, declarations, index);
}
}
insertRule(document.getElementById("spriteStyles"), "ul.blue a",
"background-image:url(images/fuchsia.gif)", "ul.fuchsia a");