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
styleSheetobject 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
styleobject 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. |
