O'Reilly Network: Modifying Styles

O'Reilly Network: Modifying Styles

Modifying Styles

10/05/2001

Older browsers, such as Netscape's Navigator 4 series, had relatively poor support for modifying Cascading Stylesheets from JavaScript -- instead requiring that you use either document.write() calls to rewrite the contents of a particular element or their equally burdensome (and Navigator-only) Javascript Stylesheets mechanism.

With the release of Microsoft Internet Explorer 5 and Netscape 6.0 for the Macintosh, however, we now have the ability to change styles on the fly from JavaScript, using the W3C DOM. Unfortunately, due to a distinction between the way that embedded and remote stylesheet properties are exposed as opposed to the way that inline STYLE properties are exposed, this can be tricky. In effect, developers are required to define all styles inline or in embedded stylesheets (whether internal or external) if they want to be able to read and modify them reliably. Despite the fact that stylesheets are far easier to work with, may be reused across pages, and may be designed by someone with no JavaScript knowledge, browser vendors recommend that dynamic changes be made via the JavaScript .style property directly.