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
file: /Techref/language/html/ib/Style_Sheets/jss.htm, 5KB, , updated: 2004/3/1 15:47, local time: 2024/12/14 01:52,
18.97.14.91:LOG IN
|
©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions? <A HREF="http://techref.massmind.org/techref/language/html/ib/Style_Sheets/jss.htm"> Javascript Style sheets</A> |
Did you find what you needed? |
Welcome to massmind.org! |
Welcome to techref.massmind.org! |
.