Inside JavaScript
The className Property
You use the className property with style sheets; this property holds the Cascading Style Sheet (CSS) class name assigned to an object. You can see the support for this property in Table 5.13. Table 5.13. The className Property
Here's an example using CSS styles, which we'll see in Chapter 21, "Cascading Style Sheets and CGI Programming;" in this case, I'm creating two CSS classes, redText and blackText , and assigning them to the text in a <DIV> using the className property to turn text black or red when the user clicks a button: (Listing 05-06.html on the web site)
<HTML> <HEAD> <TITLE>Coloring Text with Dynamic CSS Classes</TITLE> <STYLE TYPE="text/css"> .blackText {color:Black} .redText {color:Red} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function turnBlack() { document.all.div1.className = "blackText" } function turnRed() { document.all.div1.className = "redText" } // --> </SCRIPT> </HEAD> <BODY> <DIV ID = "div1"> <H1>Coloring Text With Dynamic CSS Classes</H1> <BR> <FORM> <INPUT TYPE = BUTTON Value = "Turn text black" onClick = "turnBlack()"> <INPUT TYPE = BUTTON Value = "Turn text red" onClick = "turnRed()"> </FORM> </DIV> </BODY> </HTML> You can see the results in Figure 5.5, where I've turned the text red (although it's black and white here, of course). Figure 5.5. Using the className property.
| ||||||||||||||||||||||||||||||||||||||||||||