Working with the DOM Stylesheets Collection / Page 2 | WebReference

Working with the DOM Stylesheets Collection / Page 2


[previous] [next]

Working with the DOM Stylesheets Collection [con't]

The deleteMedium() method deletes one media type at a time. Deleting a medium not in the list, or that the browser doesn't understand, will cause it to throw a 'Node not found' error. Deleting all media types from the list will cause the media text to be empty, so it will once again be applied to all media types:

You can preemptively avoid the 'Node not found' error by looping through the listed media types using the item() method and verifying that the media type is in the list before deleting it:

The following function would add a new media type to all the style sheets in a page. It returns the number of additions that were made:

Accessing the Stylesheet Directly

Another way to access the styleSheet object is through the tag that contains it. Once you obtain a reference to the LINK or STYLE element, you can reference the associated styleSheet object using the sheet property of the element:

The CSS Rule object

Presumably, obtaining a reference to the a styleSheet object is only the first step. The real goal is to manipulate the rules contained therein. The css rules are exposed via the cssRules property in DOM compliant browsers and the rules property in Internet Explorer.

The cssRules object contains five properties:

  • cssText (not available in IE): returns the content of a css rule in its entirety, from the selector to the corresponding CSS declaration(s). A useful property to easily search within a rule, by looking at both the selector and attributes of a rule all at once.
  • length: the number of rules within a style sheet.
  • parentStyleSheet: the styleSheet object that contains the current rule.
  • selectorText: returns the selector part of a rule.
  • style: provides access to individual attributes defined in the rule, similar to the style object of inline styles.

The following example retrieves the rule for <P> tags within the first style sheet in the page:

Stylesheet Methods

The methods to add and delete rules from a style sheet depend on the browser you are coding for. Your choices are:

Internet Explorer DOM Compliant Browsers
addRule(selector, declaration, [index]): adds a new rule to the style sheet, where the parameter selector is the rule's selector text (i.e.: "p," "div b" etc.), and "declaration" is the rule's properties and corresponding values(i.e.: background-color: yellow; color: brown). An optional index parameter (integer) lets you specify the position of the new rule within the style sheet, whereby 0, for example, would insert the new rule as the very first one (default is -1, which adds the new rule to the end of the style sheet). insertRule(rule, index): Inserts a new rule to the style sheet, where the parameter rule is a string containing the entire rule to add (e.g.: #myid{color: red; border: 1px solid black}), and index, an integer specifying the position within cssRules[] to insert the new rule.
removeRule([index]): removes the first rule of a style sheet. Enter an optional index (integer) to remove a specific rule based on its position in the rules[] collection. deleteRule(index): Removes a rule from the style sheet based on its position in the cssRules[] collection. Use the parameter index (integer) to specify this position.

[previous] [next]