javascript

CHAPTER 8 ■ SCRIPTING CSS
318
Don’t feel bad. I didn’t think you’d get that one right. What’s going on here? Any declarations you
write to cssText totally overwrite those already in there. So, our declarations for left, top, padding-left,
and height disappeared. This in turn means that the declarations for those properties in eight.css now
shine through. Therefore, other than swapping the blue sprite for the fuchsia one, our brooks link is
styled the same as when the page initially loaded. This is equivalent to the following markup:
Brooks
Note that when you write the value of cssText, property names are dash case, not camel case—just
like in the CSS standard.
Scripting Classes
Writing CSS2Properties members or cssText provides a way to restyle one element, but what if you want
to do so for several elements? One way is to script className, typically of an ancestor element.
Remember that for any element, the className member represents the class attribute.
In our included style sheet, eight.css, we have a rule for a blue class and a fuchsia class. The latter is
dormant. That is to say, no element in our markup is a member of the fuchsia class. So, refresh Firefox,
clear Firebug, and let’s change the className member for the element from blue to fuchsia. Doing
so, as Figure 8–6 illustrates, swaps the sprite for all six links in one fell swoop:
document.getElementsByTagName("ul")[0].className = "fuchsia";
Figure 8–6. Writing the className member to swap the blue sprite for the fuchsia one