Using Script to Read and Set CSS Properties

Let's begin with a fairly basic example of both reading and setting CSS properties with script. Code Listing 15-1 demonstrates how you can use scripting to find out and change the current style settings of an object. Figure 15-1 shows how Internet Explorer initially displays the results of this code. In Figure 15-2 you can see the Alert dialog box that appears after the user clicks the text once. After clicking OK, the user sees a second Alert dialog box, which is displayed in Figure 15-3. Figure 15-4 shows the effect of clicking OK in the second Alert dialog box. This sample will not function in Netscape Navigator 4 (though no errors will occur) because Navigator does not support the onclick event on SPAN elements.

Code Listing 15-1.

 <HTML> <HEAD> <TITLE>Listing 15-1</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeIt(oClicked){   oCS=oClicked.style   alert("You clicked the element named "+oClicked.id+".")   alert("It is "+oCS.fontWeight+". Click OK to change it.")   if (oCS.fontWeight==`bold'){oCS.fontWeight=`normal'}   else {oCS.fontWeight=`bold'} } //--> </SCRIPT> </HEAD> <BODY> <SPAN ID=MySpan STYLE="font-weight: bold; cursor: hand"       onclick="changeIt(this)"> Click me!  Then click me again! </SPAN> </BODY> </HTML>

click to view at full size.

Figure 15-1. The initial display before the MySpan element is clicked.

click to view at full size.

Figure 15-2. The first Alert dialog box.

click to view at full size.

Figure 15-3. The second Alert dialog box.

click to view at full size.

Figure 15-4. The final display after the font weight is changed.

Let's take a look at the framework of the page created in Code Listing 15-1. The SPAN element, which is named MySpan, has two CSS settings: its font-weight attribute is set to bold, and its cursor attribute is set to hand. Thus, the text in the element will be boldface by default, and the mouse pointer will change to a hand when it is resting over the element. The MySpan element also has an in-line onclick event handler, which specifies that the changeIt function should be called when the text is clicked. The keyword this is passed as an argument to the changeIt function, telling the function which item was clicked—in this case, the keyword this corresponds to the MySpan object.

The changeIt function contains the core of the sample. Because we will be using the style of the clicked object several times, we assign it to a variable. This makes for better performance and easier coding. The next line of code causes an Alert dialog box to display a text string. We created the string by concatenating three pieces of text: the words You clicked the element named, the value of the id property of the element that was clicked, and the period character. These are combined to appear in the dialog box as follows: You clicked the element named MySpan. Thus, we determined the name of the element that was clicked by reading its id property.

The next line also demonstrates how a property can be read. Every object in the Dynamic Object Model contains a style child object, which supports various properties such as fontWeight and cursor. The expression oCS.fontWeight refers to the fontWeight property of the object named oCS, which we have defined as the style child object of the item that was clicked. Thus, when the code is executed, oCS.fontWeight reads the current fontWeight setting of the item that was clicked. This line then produces an Alert dialog box telling you the font weight of the clicked item.

Next our function tests the font weight of the clicked item. If the item is bold, the function changes the weight by setting the item's fontWeight property to normal; otherwise, it sets the weight to bold. Notice that we assigned a value to a property simply by using dot notation to provide the name of the property and the particular value we wanted to assign.

By using script in Code Listing 15-1, we were able to alert the user to the current state of an item and change the font weight of that item depending on its current state. Next let's take a look at some more advanced examples.