Working with the DOM Stylesheets Collection | WebReference

Working with the DOM Stylesheets Collection

By Rob Gravelle


[next]

The W3C Document Object Model (DOM) has opened the door for dynamic Web content presentation. The combination of HTML, style sheets and scripts whose aggregate make up Dynamic HTML, allows us to manipulate any document element on the fly and update page appearance and behavior accordingly. What is less known is the DOM also exposes the style sheets themselves as a property of the document object. Using the document.styleSheets property, you can create, delete and modify existing rules within any style sheet in the page. In general, it's faster and easier to access and modify an element's style directly than through the style sheet, but there are times that the later may be necessary. That's what this article is all about.

In JavaScript, manipulation of CSS styles is done through the object.style property. For example:

An element's class can also be set via the className property:

Stylesheets Object Support

Much of the functionality used to manipulate the style sheets object is part of the DOM 2 standard. It's fully implemented in Opera 9+ and Mozilla/Firefox. It's also partially supported by Safari, Konqueror and ICEbrowser, but their support is so bad it's largely unusable. Microsoft has their own model which, while not as complete as the DOM, does provide plenty of useable functionality.

When working with DOM style sheets, it's important to realize that it doesn't provide an exact copy of what you put in your style sheet. Rather, it produces what the browser recognizes and interprets. Styles and rules that it doesn't understand aren't included, whitespace may be added or removed, combined styles may be split into their components, and split styles may be combined. Finally, comments won't be included. Note that you shouldn't try using DOM 2 Style Sheets until you're certain the style sheet has completed loading (typically this means waiting for the document's onload event to fire). If you attempt to access it before then, the cssRules collection may be too short or may not exist.

Here's a JavaScript function that iterates through the first style sheet in the style sheets collection and displays its properties:

Although the exact properties will vary by browser type and version, you can expect to see the following ones at a minimum:

  • cssRules (rules in IE): an array containing all the CSS rules of a style sheet.
  • cssText (IE only): a string representation of the entire contents of the style sheet. Some DOM compliant browsers such as Firefox support a "cssText" property on individual rules to return the contents of each rule.
  • disabled: boolean specifying whether a style sheet is disabled or not. Default value is false.
  • media: references a MediaList object. Types of media included in the list include 'all,' 'screen,' 'print,' 'projection,' 'handheld,' 'speech' and on some devices, 'tv.' More will certainly be added as demand for Web access grows.
  • ownerNode (owningElement in IE): references the document tree node that contains the current style sheet. For regular HTML pages, ownerNode typically returns the LINK or STYLE element on the style sheet. For XML, it may be the linking processing instruction.
  • ownerRule (not available in IE): for style sheets that are defined using an @import rule, returns its CSSImportRule object. You can use the cssRules[] object to add or remove rules within the style sheet.
  • ownerNode (owningElement in IE): references the document tree node that contains the current style sheet.
  • parentStyleSheet: for style sheets included on the page via the @page rule, parentStyleSheet references the top level style sheet. For standard LINK or STYLE style sheets, this property returns null.
  • title: an optional property that can be used to help identify the style sheet.
  • type: returns a numeric value for the type attribute of the style sheet - usually 1 for 'text/css.' Other possible values include 2 for @charset rules, 3 for @import rules, 4 for @media rules, 5 for @font-face rules and 6 for @page rules. If the browser doesn't ignore unknown @ rules, their type will be 0.
  • url (href in IE): the path to the linked style sheet.


The Media Object

As noted above, the media property of the style sheet references a MediaList object. This allows adding and removing of media types. It has a property mediaText that gives the full contents of the LINK or STYLE element's media attribute. If you set the mediaText to a value containing media types the browser doesn't recognize, it will likely ignore it, unless the value appears as invalid syntax to the browser, in which case it will throw an error. To be on the safe side, you should use a try...catch statement around the assignment. Here is how we would use the mediaText property to assign media types:

The media object also provides the appendMedium() method to allow you to append one media type at a time, Note that a style sheet with no media is applied to all media types. Adding a medium to a style sheet that has no specified media will cause it to be applied only to that media type:


[next]