|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
For example, given the following embedded stylesheet declaration:
However, given the following inline style attribute on a particular
If you use the former method to read the style properties for
If the element in question doesn't use inline style attributes, you get empty or null values, rather than the embedded stylesheet properties you're after.
In essence, although the browser knows how to properly override global stylesheet declarations when rendering the element, there is no single built-in cross-browser way to access the style being used for that rendering. Internet Explorer has (in the 5.x generation) introduced the
If you want to change an element's style, a similar problem exists. If you only modify the global stylesheet for an element type for which inline styles are defined, only those elements without inline styles are changed. This may be viewed as a feature or a weakness, depending on your point of view, your particular application, and the lateness of the hour or proximity of the deadline.
There is a standard way to read the current style properties for any element, the
Fortunately, there is a way to read and change an element's styles regardless of where they were originally defined. As you might expect, it entails checking all the available stylesheet properties in both embedded styles and inline STYLE attributes. I've provided a script that will take some of the pain out of doing so.
The Script's Purpose
As demonstrated above, with the increased power of the newer browsers come some compromises in ease of use for the developer. More importantly, as more and more applications are being jointly produced by developers and designers working in tandem (and sometimes without perfect communication between those implementing behavior and those implementing the look and feel) it's important to preserve flexibility in the approaches used to apply and modify style. This script helps the developer do just that.
Why would you want to modify styles on the fly? As Web applications become more and more powerful, users are demanding more flexibility and control over their personal preferences, just as they are used to having in traditional desktop applications. For instance, some users may like reading body copy in serif fonts, while others may enjoy sans-serif. Or source code listings, like those in this article, might be too small to read, so you'd want the user to be able to modify them at will. Of course, there are literally thousands of different applications for these capabilities -- I'm just pointing out some that are convenient in the context of this article.