The StyleSheet object

The StyleSheet Object

Note : The StyleSheet object is Internet Explorer 4.0 specific.

Each Style Sheet applied to a document (with a <LINK> or <STYLE>, or by using the @import method (see the Style Sheets overview)) is a style sheet and is available through the StyleSheets or Imports collections.

Each StyleSheet object has the following properties:

Properties
disabled
The disabled property directly reflects the value of the DISABLED attribute in either the <LINK> or <STYLE> element that declares the StyleSheet object. The disabled property will also be "false" if the referenced StyleSheet object has no TITLE attribute.

href
The href property will return (or can set) the URL for the referenced style sheet, if the referenced style sheet was included with a <LINK> element, returning "null" if it was set with a <STYLE>. For <LINK>ed Style Sheet objects, the href property can be changed, causing a different style sheet to be loaded for the document.

id
The id property directly reflects the referenced Style Sheet objects ID attribute (if set). The id property is read-only.

owningElement
The owningElement property returns the <LINK> or <STYLE> element that defined the referenced Style Sheet object in the document.

parentStyleSheet
For Style Sheets attached to a document by the @import method, the parentStyleSheet property will return a reference to the <LINK> or <STYLE> element that 'imported' them into the document.

readOnly
The readOnly property determines whether or not the addRule method (see below) can be used on the referenced Style Sheet. Style Sheets that aren't read-only, can have style rules added to them, using the addRule method described below.

type
The type property reflects the value of the TYPE attribute used in the <LINK> or <STYLE> element that defines the Style Sheet. Note that Style Sheets with type property/TYPE attribute values of anything other than 'text/css' aren't supported in Internet Explorer 4.0.

Methods
addImport
The addImport method can be used to include a new @imported Style Sheet object into the referenced Style Sheet object. The syntax is:

integer = stylesheet.addImport(url, [index])

where integer (the return value) specifies the index of the new @imported stylesheet in the Imports collection, url is the URL of the new Style Sheet to import and index (if specified) specifies the position of the new Style Sheet object in the StyleSheets collection. If no index is given, then the new Style Sheet object is appended to the end of the StyleSheets collection.

addRule
The addRule method can be used to add a new Style Sheet rule to the referenced Style Sheet object. For example:

intNewRule = <StyleSheet>reference.addRule "H1", "font-size:36pt"

would add a new Style for <H1> element to the Style Sheet object referenced by <StyleSheet>reference. The addRule method can also take a third argument of index which specifies where in the Rules collection the new style rule should go. By default, new rules will be appended to the end of the referenced style sheet, but by using the index property, a rule can be inserted anywhere, which can affect the use of the new rule. For example consider the case where the font-size and color of an element are changed by adding a new rule and an existing rule specifies a colour for that particular element. If the new rule is appended to the end of the Rules collection, then its colour setting will over-ride that of the existing rule. If it's included before the existing rule, then the new font-size will be used, but not the colour - that will be used from the existing style sheet rule.