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.
property. For example:
An element's class can also be set via the
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
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
- media: references a
MediaListobject. 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,
ownerNodetypically returns the
STYLEelement 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
@importrule, returns its
CSSImportRuleobject. You can use the
cssRulesobject 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
parentStyleSheetreferences the top level style sheet. For standard
STYLEstyle sheets, this property returns
- title: an optional property that can be used to help identify the style sheet.
- type: returns a numeric value for the
typeattribute of the style sheet - usually 1 for 'text/css.' Other possible values include 2 for
@charsetrules, 3 for
@importrules, 4 for
@mediarules, 5 for
@font-facerules and 6 for
@pagerules. 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
object. This allows adding and removing of media types. It has a property
that gives the full contents of the
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:
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: