Dynamic Styles | Dynamic HTML in Action

Throughout this chapter, we've used the term "dynamic styles." In Internet Explorer, styles truly are dynamic in that they can be changed at any time. This is accomplished through scripting. Code Listing 11-14 presents a simple example of changing a style with in-line script.

Code Listing 11-14.

 <HTML> <HEAD> <TITLE>Listing 11-14</TITLE> </HEAD> <BODY> <SPAN STYLE="color: red" onclick="this.style.color=`black'"> Click me! </SPAN> </BODY> </HTML>

NOTE
When you are accessing styles through script, the naming convention differs slightly from that found in conventional CSS. Because most scripting languages do not allow a hyphen in an item name (they interpret the hyphen as a minus sign), CSS attribute names such as font-weight are not valid in script. Instead, by convention, the hyphen is omitted and the next letter is capitalized. Thus, the name font-weight is scripted as fontWeight. You can find more information about these naming conventions in Chapter 14.

This sample includes a SPAN element containing the text Click me! The text is normally red because of the in-line style set for the SPAN element. When the SPAN is clicked, a JScript event handler catches the click and changes the style by setting the color to black. Thus, when the red text is clicked, it turns black. Chapter 14 provides full details about similar techniques and scripting styles.

No currently available version of Netscape Navigator supports dynamic styles in this fashion. It is not supported in Internet Explorer 3 either. As a result, Code Listing 11-14 will not perform the color change in these browsers.

This chapter has provided an overview of dynamic styles. In the remaining chapters in Part 3, we will look at the specifics of font and text control through styles, how to specify the layout and position of elements on a page, and, finally, how to use script to make styles dynamic.