JavaScript Style Sheets (Definition)

A standard for describing style sheets.



The JavaScript Style Sheet facility (JSS) is based on the CSS level 1 capabilities. They are only supported in the version 4.0 Netscape browsers and are now completely deprecated. Netscape 6.0 does not support them at all. This gives rise to some concerns on portability issues.

However, if your web server is capable of recognising the user agent value and serving different content accordingly, you may be able to ensure that JSS style sheets are served only to requesting Netscape 4.0 browsers and that other browsers will be presented with CSS style sheets instead.

The main difference is in the notation used to describe the JSS rules.

There are two ways to call in a JSS defined style sheet, either with the <STYLE> tag, which embeds the style definitions into the page, or with the <LINK> tag, which includes them from an external document.

Creating styles in JavaScript comes down to correctly forming the object model that refers to the style properties of the document object. This is managed by means of a tags object, which is the root of a collection of objects for which the style can be defined as properties. By and large the tags object has a property that corresponds to every style controllable HTML tag. It's fairly easy to guess the likely syntax and give a CSS reference, you can probably figure out the properties of the individual objects. The properties correspond with those attributes of the instances of the tags described in the browser object model (or the DOM if you prefer).

There are some special methods and functions defined for JSS to be used when creating styles. These are:

For JavaScript to be able to modify style settings, it needs to be able to read the current values and to be able to write new values into the object properties.

In Netscape 4.0, the absolute and relative style properties apply to positioning of an object. If these are present, the objects are assumed to be in layers. Layers can be controlled very effectively from within JavaScript. they can be moved, sized and have their visibility changed. However there are rendering issues and the effects are complex and hard to control when some styled objects are already rendered on the page. Some tags can have absolute positioning applied directly but it is not portable across minor revison changes of the browser.

MSIE version 4.0 provides dynamic style control. It is improved significantly in version 5.0 and 5.5 and the same DOM based model is built into Netscape 6.0. The styles are available as host objects. You can modify the appearance of styled object in MSIE even after they have already been displayed. Changing the style or position of an object gives you all the capabilities that layers provided in Netscape, and an automatic damage repair redraw is also triggered if necessary when the style of an object is modified.


Example code:

   <STYLE TYPE="text/JavaScript">
   tags.P.borderWidth = 10;
   tags.B.color = red;

See also:<META>, <STYLE TYPE="...">, <STYLE>, Case Sensitivity, contextual(), CSS level 1, Document object, JSS, JSSTag.apply, JSSTag.margins(), JSSTag.rgb(), JSSTags object


Wrox Instant JavaScript - page - 50