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

Property	NS2	NS6	IE4	IE5	IE5.5	IE6
`className`		x	x	x	x	x
	Read/Write
	Type: String

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.

graphics/05fig05.gif

The className Property