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 Stylesheets (JSS). Based on the World Wide Web Consortium (W3C)-recommended CSS model, outlined in Chapter 8, 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.
JSS is antiquated. Even the inventor eschews support for JSS entirely in favor of the standard CSS2. 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 stylesheets.
We thoroughly discuss the concepts and ideas behind stylesheets—specifically, Cascading Style Sheets—in Chapter 8, so we won't repeat ourselves here. Rather, we address only how to create and manipulate styles with JavaScript here purely for historical reasons. Before forging ahead in this section, we recommend that you first absorb the information in Chapter 8.
Netscape versions 4 and earlier implemented JSS by extending several existing HTML tags and defining a few objects that store your document's styles. Netscape no longer supports JSS, nor does any other browser.
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 stylesheet is that the type attribute of the <link> tag is set to text/JavaScript rather than text/CSS. The referenced file, styles.js, contains JavaScript statements
that define styles and classes that Netscape then uses to control
display of the current document.
Document-level JSS is defined within a <style> tag in the <head> of the document, just like
with CSS. Again, there is only one real difference: the type attribute of the <style> tag is set to text/JavaScript rather than 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";
// -->
</style>
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, among other things, does make a difference.
You associate inline JavaScript-based style rules with a
specific tag using the style
attribute, just like with 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, boldfaced 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 external JSS styles. This is reasonable because
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 because inline JSS styles affect only the current tag, not all instances of the tag.
In general, all of the values you may use for CSS you may also
use in JSS definitions. For keyword, length, and percentage values,
simply enclose the value in quotes and use it as you would any
string value in JavaScript. Thus, the CSS value bold becomes "bold" or 'bold' for JSS document-level or inline
styles, respectively; 12pt in CSS
becomes '12pt' or "12pt" in JSS.
Specify color values as the color name or a hexadecimal color value, enclosed in single or double quotes. JSS does not support the CSS decimal red, green, and blue (RGB) notation.
JSS URL values are strings containing the desired URL. Thus,
the CSS URL value url(http://www.kumquat.com) becomes
'http://www.kumquat.com' for a
JSS inline style, or "http://www.kumquat.com" at the document
level.
One unique power of JSS is that any value can be computed dynamically when the browser processes the document. Instead of statically specifying the font size, for example, you can compute it on the fly:
tags.P.fontSize = favorite_font_size();
We assume that the JavaScript function favorite_font_size() somehow determines
the desired font size and returns a string value containing that
size. This, in turn, is assigned to the fontSize property for the <p> tag, defining the font size for
all paragraphs in the document.
JavaScript defines a document property called 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}
Because the tags property
always refers to the current document, you may omit document from any JSS tag style
definition. We could have written the preceding 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 reasons are 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 more easily be 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%';
}
Like CSS, JSS lets you target styles for specific ways
that a tag can be used in your document. JSS uses the classes property to define separate styles
for the same tag. There are no predefined properties within the
classes property; instead, any
property you reference is defined as a class to be used by the
current document. For example:
classes.bold.P.fontWeight = 'bold';
with (classes.abstract.P) {
leftMargin = '20pt';
rightMargin = '20pt';
fontStyle = 'italic';
textAlign = 'justify';
}
The first style defines a class of the <p> tag named bold whose font weight is set to bold. The
next style uses the with
statement to create a class of the <p> tag named abstract with the specified properties.
The equivalent CSS rules would be:
P.bold {font-weight : bold}
P.abstract {left-margin : 20pt;
right-margin : 20pt;
font-style : italic;
text-align : justify
}
Once defined, use a JSS class just like any CSS class: with
the class attribute and the class
name.
Like CSS, JSS also lets you define a class without defining
the tag that uses the class. This lets you define generic classes
that you can later apply to any tag. To create a generic style class
in JSS, use the special tag property all:
classes.green.all.color = "green";
You can then add class="green" to any tag to have Netscape
render its contents in green. The equivalent CSS is:
.green {color : green}
One of the most powerful aspects of CSS is its
contextual style capability, wherein the browser applies a style to
tags only if they appear in the document in a certain nesting. JSS
supports contextual styles as well, through the special contextual() method within the tags property. The parameters to this
method are the tags and classes that define the context in which
Netscape applies the style. For example:
tags.contextual(tags.UL, tags.UL, tags.LI).listStyleType = 'disc';
defines a context wherein the elements (tags.LI) of an unordered list nested
within another unordered list (tags.UL, tags.UL) use the disc as their bullet
symbol. The CSS equivalent is:
ul ul li {list-style-type : disc}
You can mix tags and classes in the contextual() method. For instance:
tags.contextual(classes.abstract.P, tags.EM).color = 'red';
tells the browser to display in red <em> tags that appear within
paragraphs that are of the abstract class. The CSS equivalent
is:
p.abstract em {color : red}
Because the tags object is
unambiguously included within the contextual() method, you may omit it from
the definition. Hence, our nested list example may be rewritten
as:
tags.contextual(UL, UL, LI).listStyleType = 'disc';
A subset of the CSS style properties are supported in JSS. Table 12-2 shows the JSS style properties, their CSS equivalents, and the sections in which those properties are fully documented.
Table 12-2. JSS properties and CSS equivalents
JSS property | CSS property | See section |
|---|---|---|
align | float | |
backgroundImage | background-image | |
backgroundColor | background-color | |
borderBottomWidth | border-bottom-width | |
borderLeftWidth | border-left-width | |
borderRightWidth | border-right-width | |
borderStyle | border-style | |
borderTopWidth | border-top-width | |
clear | clear | |
display | display | |
fontSize | font-size | |
fontStyle | font-style | |
height | height | |
lineHeight | line-height | |
listStyleType | list-style-type | |
marginBottom | margin-bottom | |
marginLeft | margin-left | |
marginRight | margin-right | |
marginTop | margin-top | |
paddingBottom | padding-bottom | |
paddingLeft | padding-left | |
paddingRight | padding-right | |
paddingTop | padding-top | |
textDecoration | text-decoration | |
textTransform | text-transform | |
textAlign | text-align | |
textIndent | text-indent | |
verticalAlign | vertical-align | |
whiteSpace | white-space | |
width | width |
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 margins, padding,
and border width, respectively. Unlike their CSS counterparts
(margin, discussed in section 8.4.7.11; padding, discussed in section 8.4.7.12; and
border-width, discussed in section 8.4.7.4), 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.