Working with the DOM Stylesheets Collection / Page 3 | WebReference

Working with the DOM Stylesheets Collection / Page 3


Working with the DOM Stylesheets Collection [con't]

As mentioned earlier, the rule of thumb to follow is to set element properties directly whenever possible. Hence:

is preferable to:

That's fine for one element, but what if we wanted to change an attribute of all the <P> elements in the page, or affect multiple properties? The DOM is powerful enough to handle that as well. Have a look at the following code:

That's still a lot easier than accessing the styleSheet object.

Having said that, there are times where changing the rule makes more sense. For instance, changing element properties by className is more difficult using the DOM because you'd have to traverse the document structure to find them all. And if you change the properties on an ongoing basis, you'd have to store a reference to all the elements. Here's a function that sets the color property of the first rule of the first styleSheet:

This type of function is really useful when you don't know in advance what a property's value will be, such as when it's set by the user, or other runtime factors are involved.

CSS Rule Style Methods

At the rule level, the style object has its own methods for working with individual properties.

  • item(index): retrieves the properties that have been explicitly set in this declaration block (a declaration block starts with a left curly brace [{] and ends with the matching right curly brace [}]. ). The order of the properties retrieved using this method doesn't necessarily match the order in which they were set. This method can also be used to iterate over all properties in this declaration block.
  • setProperty(propertyName, value, priority): creates or rewrites a style.
  • getPropertyValue(propertyName): retrieves the value of a named style.
  • getPropertyPriority(propertyName): used to retrieve the priority of a CSS property (usually the !important qualifier).
  • removeProperty(propertyName): removes a named style (it will do nothing if the style is not being used).

To give you an idea of what can be done with these methods, I've written a function that iterates through a styleSheet object and turns off the !important attribute for all properties. The item() function is used to return each property from the style object. The RegExp test(string) function then looks for the !important attribute. At this time, it's the only non-string value that can be returned from the getPropertyPriority() function, so there's no need to be quite as specific as I was here. Notice the use of some special regular expression symbols such as the start and end of string position matchers (^ and $ respectively) and the zero or one occurrence modifier (?). The latter is used because some browsers, like IE for Mac, include the exclamation point, while others don't. If our test evaluates to true, we use the setProperty() function to overwrite the same property, passing in an empty string for the priority:

Most of these functions are part of the DOM level 2 specification, so they're not supported across all browsers, and the ones that do aren't one hundred percent compliant. In fact, my trusty Internet Explorer 6 on my development workstation couldn't process the above function, although no errors were displayed.

The following charts show browser support for each of the properties and methods that we discussed here today.

Now that we've looked at some ways that we can use the DOM styleSheets collection to manipulate rules and their properties, there may come a time that you will recognize a situation where they will come in handy. In the mean time, don't dive into your code and start changing your DOM element handling just yet! Remember our rule of thumb: access document elements directly using the notation whereever possible. If you can't solve a problem that way, then use the DOM styleSheets, but you will have to be thorough in your error handling. Use try/catch blocks whenever possible!