javascript

Adding a Rule to a Style Sheet
CHAPTER 8 ■ SCRIPTING CSS
Now that we have a helper function to provide us with the numeric index of a rule, we can explore how
to insert a rule into a style sheet. Of course, there is a DOM way and an Internet Explorer way. Let’s write
another helper function to compensate for Internet Explorer’s skullduggery.
Clear Firebug, but do not refresh Firefox because we want findIndex() to remain in memory. Name
the helper function insertRule. This one will work with four parameters:
• element will be a or Element node.
• selector will be the text of the selector for the new rule, in other words, a string
like "div#running li".
• declarations will be the text of the declaration block, minus the curly braces, such
as a string like "top:135px; background-position:0 -81px". Note that property
names are dash case. It’s just like in your CSS code or in
CSSStyleDeclaration.cssText.
• index contains the text of the selector for the rule you want to insert the new rule
before. So, that’s the selector string we will pass to findIndex(), which will then
return a numeric index, or undefined if we are out of luck.
function insertRule(element, selector, declarations, index) {
}
Now let’s move on to the body of our helper function. Assign either the DOM or Internet Explorer
member that contains the CSSStyleSheet object to a local variable named sheet. Similarly, assign the
DOM or Internet Explorer member that contains the CSSRuleList array-like object to one named rules.
It’s just like we did in findIndex().
Now let’s make the index parameter optional by way of a couple if statements. JavaScript will run
the block of the first if statement in the event that we did pass a selector string for the value of index.
Otherwise, JavaScript will run the block of the second if statement, like if we invoked insertRule() with
just three parameters rather than four. In this case, index defaults to undefined. Let’s overwrite that value
with rules.length, which contains a number one greater than the total number of rules in the style
sheet. Later, this numeric index will enable us to append the new rule to the very end of the style sheet.
Thus far we have this:
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;
}
}
Now sheet will contain either a DOM method named insertRule() or an Internet Explorer method
named addRule(). Let’s figure out which one is available by way of the else if idiom. In the event that
Firefox, Safari, or Opera is running our function, insertRule() will be defined. This method takes two
parameters:
• The full text of the rule, curly braces and all. So, we will cobble that together with
the + operator.
329