styleSheetNN 6 IE 4 DOM 2  

  

The styleSheet object represents a style sheet that may have been created as a style element or imported with a link element or @import statement inside a style element. This object is different from the style element object, which strictly reflects the style HTML element and its attributes. The document.styleSheets[ ] collection contains zero or more styleSheet objects. The shared disabled property is available in all supporting browsers, facilitating the enabling and disabling of entire style sheets with simple Boolean assignments.

 
Object Model Reference
  
[window.]document.styleSheets[i]
 
Object-Specific Properties
 
cssRules[ ]cssTexthrefimports[ ]media
ownerNodeownerRuleowningElementpages[ ]parentStyleSheet
readOnlyrules[ ]titletype
 
Object-Specific Methods
 
addImport( )addRule( )deleteRule( )insertRule( )removeRule( )
 
Object-Specific Event Handler Properties

None.

cssRules[ ]NN 6 IE 5(Mac) DOM 2  

Read-only  

Returns a collection of cssRule objects nested within the current styleSheet object. The IE-only equivalent is the rules property. See the cssRules object earlier in this chapter for a description of this collection object's property and methods; see the cssRule object earlier in this chapter for a description of the individual members of this collection.

 
Example
  
var allCSSRules = document.styleSheets[0].cssRules;
 
Value

Reference to a CSSRules collection object.
 
Default

Array of zero length.

cssTextNN n/a IE 5 DOM n/a  

Read/Write  

Contains the entire text (as a string) of all rules defined in the style sheet. This is useful primarily if you wish to replace the entire set of rules with a new set. To act on the text of an individual rule in IE, access the cssText property of a single rule object (obtained by the styleSheet object's rules[i].cssText property); or, in Netscape 6, you can use the cssRules[i].cssText property.

 
Example
  
var allCSSText = document.styleSheets[0].cssText;
 
Value

String.
 
Default

Empty string.

disabledNN 6 IE 4 DOM 1  

Read/Write  

Specifies whether the element is available for user interaction. When set to true, the element cannot receive focus or be modified by the user, and it typically appears grayed out on the page. This property is available for all HTML element objects in IE 5.5 for Windows and later. For IE 4 and IE 5, it applies only to form controls, while Netscape 6 and later recognize the property for form controls and the style element object. A disabled form control's name/value pair is not submitted with its form.

 
Example
  
document.getElementById("myButton").disabled = true;
 
Value

Boolean value: true | false.
 
Default

false
hrefNN 6 IE 4 DOM 2  

Read/Write  

This is the URL specified by a link element's href attribute (when the link is used to import a style sheet). This value is read/write in IE for Windows, but read-only in Netscape 6 and IE/Mac.

 
Example
  
document.styleSheets[1].href = "css/altStyles.css";
 
Value

String of complete or relative URL.
 
Default

None.
imports[ ]NN n/a IE 4 DOM n/a  

Read-only  

Returns a collection (array) of styleSheet objects imported into an explicit styleSheet object via the @import rule. See the imports collection object earlier in this chapter for further discussion. For Netscape 6, you must loop through all cssRule objects of a styleSheet object in search of those with type property values equal to 3 (the same as the cssRule object's IMPORT_RULE constant).

 
Example
  
var allImportRules = document.styleSheets[0].imports;
 
Value

Reference to an imports collection object.
 
Default

Array of zero length.

mediaNN 6 IE 4 DOM 2  

Read/Write  

Specifies the intended output device for the content governed by the style sheet (reflecting the media attribute of the link and style elements). The media property looks forward to the day when browsers are able to tailor content to specific kinds of devices such as pocket computers, text-to-speech digitizers, or fuzzy television sets. This property is not available in IE 4/Macintosh.

 
Example
  
if (document.styleSheets[2].media == "print") {
    // process for print output
}
 
Value

Any one of the following constant values as a string: all | print | screen.

 
Default

all
ownerNodeNN 6 IE n/a DOM 2  

Read-only  

Returns a reference to the document tree node that contains the styleSheet object. This node is either a style or link element, depending on the way the style sheet is defined in the document. The IE (Windows and Mac) equivalent property is owningElement. IE for the Macintosh provides an extra owningNode property, which is very likely a mistaken implementation of the W3C DOM ownerNode property.

 
Example
  
var mama = document.styleSheets[2].ownerNode;
 
Value

Object reference.
 
Default

None.
ownerRuleNN 6 IE n/a DOM 2  

Read-only  

For a styleSheet object brought into the document via an @import rule, returns a reference to that @import rule object (a W3C DOM CSSImportRule object). The cssRule object earlier in this chapter provides the properties and methods that apply to a CSSImportRule object. For other style sheet types, the property returns null.

 
Example
  
var hostRule = document.styleSheets[2].ownerRule;
 
Value

Object reference or null.
 
Default

null
owningElementNN n/a IE 4 DOM n/a  

Read-only  

Returns a reference to the style or link element object that defines the current styleSheet object. Each document maintains a collection of style sheets created with both the style and link elements. The comparable Netscape 6 property is ownerNode.

 
Example
  
var firstStyleID = document.styleSheets[0].owningElement.id;
 
Value

Element object reference.
 
Default

None.
pages[ ]NN n/a IE 5.5(Win) DOM n/a  

Read-only  

Returns a collection (array) of page objects (@page rules) nested within a styleSheet object. For Netscape 6, you must loop through all cssRule objects of a styleSheet object in search of those with type property values equal to 6 (the same as the cssRule object's PAGE_RULE constant). See the page object.

 
Example
  
var allPageRules = document.styleSheets[0].pages;
 
Value

Reference to a pages collection object.
 
Default

Array of zero length.

parentStyleSheetNN 6 IE 4 DOM 2  

Read-only  

For a styleSheet object generated by virtue of inclusion with an @page rule, the parentStyleSheet property returns a reference to the styleSheet (created as a link or style element) object that imported the current style sheet. For a nonimported style sheet, the property returns null.

 
Example
  
var myMaker = document.styleSheets[0].parentStyleSheet;
 
Value

Reference to a styleSheet object.
 
Default

null

readOnlyNN n/a IE 4 DOM n/a  

Read-only  

Specifies whether the style sheet can be modified under script control. Style sheets imported through a link element or an @import rule cannot be modified, so they return a value of true.

 
Value

Boolean value: true | false.
 
Default

false
rules[ ]NN n/a IE 4 DOM n/a  

Read-only  

Returns a collection of rule objects nested within the current styleSheet object. The W3C DOM equivalent (implemented in Netscape 6 and IE 5/Mac) is the cssRules property. See the cssRules object earlier in this chapter for a description of this collection object's property and methods; see the cssRule object earlier in this chapter for a description of the individual members of this collection.

 
Example
  
var allrules = document.styleSheets[0].rules;
 
Value

Reference to a rules collection object.
 
Default

Array of zero length.

titleNN 6 IE 4 DOM 2  

Read/Write  

Exposes the title attribute of the style or link element that owns the current styleSheet object. Since the attribute does not affect user interface elements (the elements are unrendered, and thus don't show tool tips), it is available to convey other string information to the styleSheet object under script control.

 
Example
  
if (document.styleSheets[2].title == "corpStyleWindows") {
    // process for the designated style
}
 
Value

String value.
 
Default

Empty string.
typeNN 6 IE 4 DOM 2  

Read-only  

Returns the style sheet MIME type specified by the type attribute of the style or link element.

 
Example
  
if (document.styleSheets[0].type == "text/css") {
    ...
}
 
Value

String (text/css for typical CSS style sheets).
 
Default

None.

addImport( )NN n/a IE 4 DOM n/a  

addImport(url, [index])

  

Adds an external style sheet specification to a styleSheet object.

 
Parameters
 
  • A complete or relative URL to the style sheet (.css) file.
  • An optional integer indicating where in the collection the new element should be placed.
 
Returned Value

Integer of the index position within the styleSheets[ ] collection where the style sheet was added (in case you omit the second parameter and let the browser find the end position).

addRule( )NN n/a IE 4 DOM n/a  

addRule("selector", "style"[, index])

  

Adds a new rule for a style sheet. This method offers a scripted way of adding a rule to an existing styleSheet object: 

document.styleSheets[1].addRule("p b","color:red");
 

You may duplicate a selector that already exists in the styleSheet and, therefore, override an existing rule for the same element selector. The only prohibition is that you may not override a rule to convert a plain style rule into one that creates a positionable element (or vice versa). The new rule is governed by the same cascading rules as all style sheet rules (that includes the rule's source code position among other rules with the same selector). Therefore, a new rule in a styleSheet object does not supersede a style set in an element's style property.

 
Parameters
 
  • The style rule selector as a string.
  • One or more style attribute:value pairs. Multiple pairs are semicolon delimited, just as they are in the regular style sheet definition.
  • An optional integer indicating where in the collection the new element should be placed.
 
Returned Value

Early versions of IE returned no value. More recently, IE for Windows returns -1, while IE for Macintosh returns null. In the future, the returned value may become the integer of the index location of the new rule.

deleteRule( )NN 6 IE 5(Mac) DOM 2  

deleteRule(index)

  

Removes a rule from the styleSheet object. The integer index parameter value points to the zero-based item in the cssRules array to delete. Note that IE 5 for Macintosh implements both the Microsoft removeRule( ) and W3C DOM deleteRule( ) method for the same operation.

 
Parameters
 
  • A zero-based integer indicating which rule in the cssRules collection is to be deleted.
 
Returned Value

None.
insertRule( )NN 6 IE 5(Mac) DOM 2  

insertRule("ruleText", index)

  

Adds a new rule for a style sheet. This method offers a scripted way of adding a rule to an existing W3C DOM styleSheet object: 

document.styleSheets[1].insertRule("p b {color:red}", 0);
 

You may duplicate a selector that already exists in the styleSheet and, therefore, override an existing rule for the same element selector. The only prohibition is that you may not override a rule to convert a plain style rule into one that creates a positionable element (or vice versa). The new rule is governed by the same cascading rules as all style sheet rules (that includes the rule's source code position among other rules with the same selector). Therefore, a new rule in a styleSheet object does not supersede a style set in an element's style property. Note that IE 5 for the Macintosh implements both the W3C DOM insertRule( ) and Microsoft addRule( ) methods to accomplish the same result.

 
Parameters
 
  • The entire style rule selector as a string in exactly the same format as assigned in a style element: selector {attribute:value; attribute:value;...}.
  • Zero-based integer indicating where in the cssRules collection the new rule should be placed.
 
Returned Value

Integer of the index location of the new rule.
removeRule( )NN n/a IE 4 DOM n/a  

removeRule(index)

  

Removes a rule from the styleSheet object. The integer index parameter value points to the zero-based item in the rules array to delete.

 
Parameters
 
  • A zero-based integer indicating which rule in the rules collection is to be deleted.
 
Returned Value

None.