Professional JavaScript | 23 | WebReference

Professional JavaScript | 23

[previous] [next]

Professional JavaScript


Styles allow formatting normally specified in HTML tags to be collected together and applied to tags repeatedly as a unit. JavaScript can be used with styles. A syntax is required to identify the contents of a style, with the most common syntax being that of the CSS-1 standard, which is what is currently implemented in most browsers.

From the JavaScript perspective, there are two issues with handling styles: creating them and working with them. When creating styles, there are variations in functionality provided by Internet Explorer 5.0 and Netscape 4.x.

Creating Netscape JavaScript Style Sheets (JSSS)

Style sheets can be written in several different languages, one of which is JavaScript. JavaScript style sheets conform to the CSS-1 style sheet model, so they are equivalent to style sheets written in CSS-1 syntax. JavaScript style sheets are known by the acronym JSSS, and are only supported in the Netscape 4+ browsers. Internet Explorer 4+ has two alternative techniques toward the same end, demonstrated below:

<STYLE TYPE="text/JavaScript">
 tags.P.borderWidth = 100;
 tags.P.borderStyle = 'none';            // or else a very thick border ensues
 tags.B.color = "red";
<LINK REL="stylesheet" TYPE="text/JavaScript" HREF="fancystyle" TITLE="Fancy">
<P> Spacious paragraph ! </P>
<P><B>Angry spacious paragraph!</B></P>
The use of the <STYLE> tag shows that creation of style sheets in JavaScript is just a matter of creating correctly named properties and assigning valid values. Capital 'P' and 'B' in the example stand for the <P>aragraph and <B>old tags respectively. The section describing the browser object model explains what properties exist. The CSS-1 concepts of classes and ids have a similar syntax.

The <LINK> tag in the head of an HTML document is supposed to identify dependencies between this document and other documents in a general manner. One such dependency is a JavaScript style sheet, so this tag provides an alternative to embedding the style sheet data directly in the document.

There are a few special JavaScript functions for JSSS:

<STYLE TYPE="text/JavaScript">
 tags.H1.color = 'pink';
 tags.H1.margins(1,2,3,4);            // set top, right, bottom, left margins.
                                      // paddings(), borderWidths() exist too.
 contextual(tags.H1, tags.B).fontStyle = "italic";
 function change_it()
  if ( color == 'pink' ) fontStyle = "medium";
 tags.I.apply = change_it();
This example doesn't do anything much; we're just illustrating a typical use of the various functions and their syntaxes.

The first few bits of the style details are simple. The margins() method is handy shorthand for setting the four margin properties all at once – it just saves typing. The rgb() method is similarly handy for specifying colors by value.

The next part of the style takes a bit of getting used to. contextual() is a method, which lets one style depend on another, the equivalent of CSS-1 syntax like 'H1 B { font-style: italic}'. As JavaScript it looks a bit unusual until you realize that contextual() is creating an object, which has its fontStyle property set. contextual() can take any number of arguments, which means you can have any number of levels of tag nesting as a condition for the special style information.

The final part creates a JavaScript function and assigns it to the special property "apply" of the current style for the <I> tag. The "apply" property is an escape hatch for those special cases when it all becomes too hard. When the browser reads a tag and collects together the relevant style information, it first resolves how that tag's details will be displayed. Before displaying the tag details, it checks the "apply" property. If the "apply" property is set, then the assigned function is called which can then do any last-minute band-aid work required on the tag's ultimate style.

In this example, because <B> tags inside <H1> tags are shown as italic, some confusion might arise if <I> tags are also present inside the <H1> tag–they could look the same. The "apply" property is used to avoid this case. The change_it() function checks the color the tag details are going to be rendered in and, if the answer is pink, assumes that the <I> tag is inside a <H1> tag and so changes it to medium style.

[previous] [next]
and Created: February 12, 2001
Revised: March 5, 2001