home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeHTML & XHTML: The Definitive GuideSearch this book

12.4. JavaScript Style Sheets

Much of a browser's work is manipulating the display, and much of its display code already has been exposed for JavaScripting. So it seemed only natural, perhaps even relatively easy, for the developers at Netscape to implement JavaScript Style Sheets. Based on the W3C recommended Cascading Style Sheet model (CSS; see Chapter 8, "Cascading Style Sheets"), this alternative document style technology lets you prescribe display properties for all the various HTML elements, either inline as tag attributes, at the document level, or for an entire document collection.

JavaScript Style Sheets (JSS) are a Netscape invention. In fact, for a short time in the fall of 1996, Netscape appeared ready to eschew the CSS methodology, which Internet Explorer had already implemented, and use JSS exclusively for HTML document designers with its then-current browser, Netscape Navigator 4. In the end, Netscape Navigator 4 supported both JSS and CSS technologies while Netscape 6 eschews support for JSS in favor of the standard CSS2. At this point, CSS should be seen as Netscape's long-term direction.

We are strong proponents of reasonable standards, and now that the CSS2 model is fully supported in HTML 4 and XHTML, we can't recommend that you use anything but CSS-standard style sheets. Evidently, Netscape now agrees with us on this point.

The CSS model is a good one, and it is good that Netscape has decided to support it. Whether Internet Explorer will someday support JSS is not known, but we doubt it. It is clear that Microsoft intends continued support for the CSS2 standard, as well as the HTML 4 and XHTML standards (they haven't had good results bucking web standards in the past).

But standards aren't the whole story. We can't imagine that the HTML author, let alone the page layout designer, is going to abide the rigid programming syntax of JavaScript. Nonetheless, there are some advantages to JSS that some authors will find useful, even though it restricts their document's full potential to the select Netscape 4 user.

We thoroughly discuss the concepts and ideas behind style sheets -- specifically, Cascading Style Sheets -- in Chapter 8, "Cascading Style Sheets", so we won't repeat ourselves here. Rather, we address only how to create and manipulate styles with JavaScript. Before forging ahead in this section, we recommend that you first absorb the information in Chapter 8, "Cascading Style Sheets".

12.4.1. JavaScript Style Sheet Syntax

Netscape implements JSS by extending several existing HTML tags and defining a few new objects that store your document's styles. External, document-level, and inline JSS

As with CSS, you can reference and load external JSS files with the <link> tag. For example:

<link href="styles.js" rel=stylesheet type=text/JavaScript>

The only real difference between this tag and the one for a CSS external style sheet is that the type attribute of the <link> tag is set to text/JavaScript instead of text/CSS. The referenced file, styles.js, contains JavaScript statements that define styles and classes that Netscape will then use to control display of the current document.

Document-level JSS is defined within a <style> tag in the <head> of the document, just like CSS. Again, there is only one real difference in that the type attribute of the <style> tag is set to text/JavaScript instead of text/CSS.

The contents of the <style> tag for JSS are quite different from those for CSS, however. For example:

<style type=text/JavaScript>
    tags.BODY.marginLeft = "20px";
    tags.P.fontWeight = "bold";
  // -->

First, notice that we use the standard JavaScript and HTML comments to surround our JSS definitions, preventing noncompliant browsers from processing them as HTML content. Also notice that the syntax of the style definition is that of JavaScript, where letter case does make a difference, among other things.

You associate inline JavaScript-based style rules with a specific tag using the style attribute, just like CSS inline styles. The value of the attribute is a list of JSS assignments, separated by semicolons. For example:

<p style="color = 'green'; fontWeight = 'bold'">

creates a green, bold-faced text paragraph. Notice first that you need to enclose inline style values within single quotation marks, not double quotation marks, as you might use for document-level and in external JSS styles. This is reasonable, since the style attribute value itself must be enclosed in double quotation marks.

Also note that inline JSS definitions use only the property name, not the containing tag object that owns the property. This makes sense, since inline JSS styles affect only the current tag, not all instances of the tag. Defining styles for tags

JavaScript defines a new document property, tags, that contains the style properties for all HTML tags. To define a style for a tag, simply set the appropriate property of the desired style property within the tag property of the document object. For example:

document.tags.P.fontSize = '12pt';
document.tags.H2.color = 'blue';

These two JSS definitions set the font size for the <p> tag to 12 points and render all <h2> tags in blue. The equivalent CSS definitions are:

p {font-size : 12pt}
h2 {color : blue}

Since the tags property always refers to the current document, you may omit document from any JSS tag style definition. We could have written the previous two styles as:

tags.P.fontSize = '12pt';
tags.H2.color = 'blue';

Moreover, as we mentioned previously, you may omit the tag name, as well as the document and tags properties for inline JSS using the style attribute.

Capitalization and case are significant in JSS. The tag names within the tags property must always be fully capitalized. The embedded capital letters within the tag properties are significant: any deviation from the exact lettering produces an error, and Netscape won't honor your JSS declaration. All of the following JSS definitions are invalid, though the reason is not overly apparent:

tags.p.fontsize = '12pt';
tags.Body.Color = 'blue';
tags.P.COLOR = 'red';

The correct versions are:

tags.P.fontSize = '12pt';
tags.BODY.color = 'blue';
tags.P.color = 'red';

It can be very tedious to specify a number of properties for a single tag, so you can take advantage of the JavaScript with statement to reduce your typing burden. These styles:

tags.P.fontSize = '14pt';
tags.P.color = 'blue';
tags.P.fontWeight = 'bold';
tags.P.leftMargin = '20%';

can be more easily written as:

with (tags.P) {
  fontSize = '14pt';
  color = 'blue';
  fontWeight = 'bold';
  leftMargin = '20%';

You can apply similar styles to diverse tags just as easily:

with (tags.P, tags.LI, tags.H1) {
  fontSize = '14pt';
  color = 'blue';
  fontWeight = 'bold';
  leftMargin = '20%';

12.4.2. JavaScript Style Sheet Properties

A subset of the CSS style properties are supported in JSS. The JSS style properties, their CSS equivalents, and the sections in which those properties are fully documented are shown in Table 12-2.

Table 12-2. JSS Properties and Cascading Style Sheet Equivalents

JSS Property

CSS Property

See Section



Section, "The float property"



Section, "The background-image property"



Section, "The background-color property"



Section, "The border-width property"



Section, "The border-width property"



Section, "The border-width property"



Section, "The border-style property"



Section, "The border-width property"



Section, "The clear property"



Section, "The display property"



Section, "The font-size property".



Section, "The font-style property"



Section, "The height property"



Section, "The line-height property"



Section, "The list-style-type property"



Section, "The margin properties"



Section, "The margin properties"



Section, "The margin properties"



Section, "The margin properties"



Section, "The padding properties"



Section, "The padding properties"



Section, "The padding properties"



Section, "The padding properties"



Section, "The text-decoration property"



Section, "The text-transform property"



Section, "The text-align property"



Section, "The text-indent property"



Section, "The vertical-align property"



Section, "The white-space property"



Section, "The width property"

JSS also defines three methods that allow you to define margins, padding, and border widths within a single style property. The three methods, margins( ), paddings( ), and borderWidths( ), accept four parameters, corresponding to the top, right, bottom, and left margin, padding or border width, respectively. Unlike their CSS counterparts (margin, Section, "The margin properties"; padding, Section, "The padding properties"; and border-width, Section, "The border-width property"), these JSS methods require that you always specify all four parameters. There is no shorthand way in JSS to set multiple margins, paddings, or border widths with a single value.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.