Categories World Wide Web

Continued from Setting the Stage

The next step is to determine how to assign style rules dynamically in JavaScript. With IE, you reference the specific stylesheet you want to work with (via its unique identifier) and then use the associated addRule() method to set style rules. The general syntax for addRule() is:

document.styleSheets["style_id"]
.addRule (css_property + ":" + prop_value)

document.styleSheets["ssA"].addRule ("h1", "color:blue");

Another common use for addRule() is to set values for a specified class type or an HTML element identifier. Here, style rules are added for all instances of h1 with the class special and the unique ID Open:

document.styleSheets["ssA"].addRule ("h1.special", "font-size:18pt");
document.styleSheets["ssA"].addRule ("#Open", "font-size:10pt");

In Navigator, you reference CSS attributes as JavaScript properties. Although one-word attributes generally have an identical property name, multiple-word attributes need to be massaged a bit. You do this by removing the hyphen between the words and capitalizing the first letter of the second and successive words. Following this rule, the font-size CSS attribute becomes the fontSize JavaScript property.

With Navigator, you use the document.tags object to make style assignments for HTML elements and the document.classes object for CSS classes. Here, style assignments are added for p tags and the class mOver:

document.tags.P.fontSize="12pt";
document.classes.mOver.all.fontSize="36pt";

Using the ids object, you can make style assignments for HTML identifiers as well. The following example makes a style assignment for an HTML element with the unique identifier Winner:

document.ids.Winner.fontSize="22pt";

In IE, you manipulate named page elements via the associated style object. In Navigator, you manipulate these elements via the document object. If you create a paragraph with id="test", you could set its font size using test.style.fontSize in IE and document.test.fontSize in Navigator. (This technique is described in depth in "DHTML That Works in Both IE and Navigator," January 19, 1999).

Because IE and Navigator have different techniques for making style assignments, you need a way to determine which syntax to use when. The best way to do this is to check for supported objects. Only IE 4.0 or later supports the document.all object. Only Navigator 4.0 or later supports the document.layers object. Figure 1 shows one way to check for the presence of these objects. Here, h1 elements are set to blue with a 50-point font in both IE and Navigator. If you need to perform multiple checks for object support, you may want to test for the objects, assign the results to variables, and then reference the variables in your code:

iExplorer = (document.all) ? true:false;
if (iExplorer) { //do IE stuff

Obviously, you can make static assignments such as those shown in Figure 1 through a traditional stylesheet. Fortunately, we're just hitting the tip of the CSS iceberg. Beyond the world of fixed values for style rules is the realm of the dynamic, where all values can be defined on the fly.

Next: Getting Dynamic

Published as Internet Builder in the 5/4/99 issue of PC Magazine.

Related Links
• Server-Side JavaScript -- PC Tech
• DHTML That Works in Both IE and Navigator -- PC Tech
• JavaScript -- DevHead
• ScriptHead Archive -- DevHead
 
• JavaScript Programming Courses -- ZDU