javascript STYLE Description

In practice, however, a style object that you access through an HTML element object's style property is limited in scope: It reflects only the CSS settings explicitly defined in the element's tag via the style attribute or settings assigned to the element's style property via script. But other style sheets associated with the browser (internal style sheets) and the document (explicit style sheet rules defined in the <style> element and rules imported through either a link element or an @import rule) also affect the rendered characteristics of the element. A union of all style sheet attributes affecting an elementthe effective style definitionmay be read, but through browser-dependent syntax. IE uses the currentStyle property of an element, whereas Netscape 6 uses the W3C DOM window.getComputedStyle( ) method. Both syntaxes return an object that lets scripts inspect the value of each effective style attribute value.

While the three IE style-related objects (style, currentStyle, and runtimeStyle) return a style object with properties that expose CSS style attributes, the situation is a little more complex on the Netscape 6 side. On the one hand, Netscape 6 implements a version of the W3C DOM CSSStyleDeclaration object that exposes all the CSS attributes as properties. This is the version accessed through an element object's style property (just like IE, thus making an element object's style property work cross-browser). But when you read the effective style sheet (via window.getComputedStyle( )), the object that comes back does not expose the CSS attributes directly as properties. Instead, you must use the CSSStyleDeclaration methods (listed below) to inspect a specific attribute value by name. It's a longer way to reach a particular effective style attribute value, but very much in keeping with other attribute-reading syntax deployed throughout the W3C DOM. The only time this cross-browser disconnect affects you is when you need to view the effective style attribute for an unmodified style. Once you set an attribute value via the element object's style property, you can read it from the style property cross-browser.

This section lists the available style object properties plus the Netscape 6 (W3C DOM) formal methods for accessing those attributes. The W3C DOM lists a large percentage of the style object properties under an object umbrella called CSS2Properties. The specification offers the CSS2Properties object as an optional convenience for browsers. Fortunately for cross-browser scripters, Netscape 6 implements CSS2Properties at least for the element object style property.

The properties of the style object listed below correspond to the CSS attributes.

• [window.]document.getElementById("elementID").style
• [window.]document.styleSheets[i].rules[j].style
• [window.]document.styleSheets[i].cssRules[j].style

None.