Chapter 9. CSS modification

JavaScript allows you to modify the CSS presentation layer of your site. A style change is an excellent (and very common) way to draw your users' eyes to the page element on which you want them to focus.

In fact, seven of the example scripts use some form of CSS modification. For instance, Form Validation changes the styles of the incorrect form field, and XMLHTTP Speed Meter uses animations (i.e., many changes to the same style in a short time) to draw the eye of the user to the speed data. (Also, to be honest, as a bit of eye candy.) Dropdown Menu uses style changes to show and hide menu items. These changes all have the same purpose: to draw the eye of the user to these elements.

JavaScript can modify CSS in four ways:

• By modifying the style property of an element (element.style.margin = '10%').

• By changing the class or id of an element (element.className = 'error'). The browser automatically applies the styles defined on the new class or id.

• By writing new CSS instructions in the document (document.write('<style>.accessibility {display: none}</style>').

• By changing the style sheet of the entire page.

Most CSS modification scripts use either the style property or a class/id change. The document.write method is used only in specialized situations to enhance the page's accessibility. Finally, changing entire style sheets is rarely useful, both because it's not supported by all browsers, and because usually you want to single out specific elements for style changes.

However, I use all four methods in the example scripts. We'll look at all of them, and their proper context, in this chapter.