Note : Javascript Style Sheets are only supported by the Navigator component of Netscape Communicator.

As well as fully supporting the Cascading Style Sheets specification (see Style Sheets overview), Netscape introduced Javascript Style Sheets. Even though all CSS style sheet declarations can be re-written in JSS, the results would only be visible in Netscape v4.0 and above and the style sheet declarations can not be manipulated through scripting without re-loading the document.

The most basic method of declaring a style using Javascript Style Sheets is to reference the particular element through Netscape's tags array (a property of the Document Object). For example:

<STYLE TYPE="text/javascript">
tags.P.color = "#FF0000"
</STYLE>

Note the different TYPE attribute for the <STYLE> element. The above declaration sets all <P> elements to use a red colour in the document. For specifying multiple declarations for the same element, the width keyword can be used. For example:

<STYLE TYPE="text/javascript">
with (tags.P) {
color = "#FF0000";
fontSize = "20pt";
margin = "0.5in";
}
</STYLE>

Note the subtle difference between the JSS syntax (e.g. fontSize) and that of standard CSS (e.g. font-size). A more complete listing of the changes is given below.

To specify classes of style sheet declaration (i.e. as you would with .className {declaration} in CSS), the classes property must be used. For example:

<STYLE TYPE="text/javascript">
classes.yellow.all.color="#FF0000"
</STYLE>

The style could then be used as :

<P CLASS="yellow"> some yellow text

To specify classes for just one element, change the all keyword for the element name (i.e classes.red.P.color="#FF0000" / <P CLASS="red">.

Javascript style sheets also have a similar mechanism for using the ids property, to set styles for elements that use their ID property to reference a style sheet. This can allow multiple styles to be attached to a single element. For example, setting:

<STYLE TYPE="text/javascript">
classes.BigText.all.fontSize = "20pt"
ids.BlueText.color = "#0000FF"
</STYLE>

and then using:

<P CLASS="BigText" ID="BlueText">Some big blue text

would give the paragraph text a blue colouring, as well as it being big text.

For contextual selection of style declarations, simply use:

<STYLE TYPE="text/javascript">
contextual(tags.H1, tags.EM).color = "green";
</STYLE>

this is the same as using H1 EM {color:green} as one would when using standard Style Sheets.

CSS vs. JSS property names
As with the Internet Explorer specific Style Object, Netscape renamed some of the style sheet properties for use with Javascript Style Sheets. Basically, where the style sheet name has a hyphen, the Javascript style sheet name uses an unhyphenated, mixed case name. I.e. border-color would be borderColor, text-align is textAlign. That aside, the property values that can be attributed to the various Javascript style sheets properties are the same as those that can be set for the various standard CSS properties. Take a look through the Properties and Values topics for more information on style sheet attribute values.

© 1995-1998, Stephen Le Hunte