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
!importantqualifier). - 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 element.style 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!
