Section 16.4. Scripting Computed Styles

16.4. Scripting Computed Styles

The style property of an HTML element corresponds to the style HTML attribute, and the CSS2Properties object that is the value of the style property includes only inline style information for that one element. It does not include styles from anywhere else in the CSS cascade.

Sometimes you do want to know the exact set of styles that apply to an element, regardless of where in the cascade those styles were specified. What you want is the computed style for the element. The name computed style is unfortunately vague; it refers to the computation that is performed before the element is displayed by the web browser: the rules of all stylesheets are tested to see which apply to the element, and the styles of those applicable rules are combined with any inline styles for the element. This aggregate style information can then be used to correctly render the element in the browser window.

The W3C standard API for determining the computed style of an element is the getComputedStyle() method of the Window object. The first argument to this method is the element whose computed style is desired. The second argument is any CSS pseudoelement, such as ":before" or ":after" whose style is desired. You probably won't be interested in a pseudoelement, but in the Mozilla and Firefox implementation of this method, the second argument is required and may not be omitted. As a result, you'll usually see getComputedStyle() invoked with null as its second argument.

The return value of getComputedStyle() is a CSS2Properties object that represents all the styles that apply to the specified element or pseudoelement. Unlike a CSS2Properties object that holds inline style information, the object returned by getComputedStyle() is read-only.

IE does not support the getComputedStyle() method but provides a simpler alternative: every HTML element has a currentStyle property that holds its computed style. The only shortcoming of the IE API is that it does not provide a way to query the style of pseudoelements.

As an example of computed styles, you could use cross-platform code like the following to determine what typeface an element is displayed in:

 var p = document.getElementsByTagName("p")[0]; // Get first paragraph of doc var typeface = "";                             // We want its typeface if (p.currentStyle)                            // Try simple IE API first     typeface = p.currentStyle.fontFamily; else if (window.getComputedStyle)              // Otherwise use W3C API     typeface = window.getComputedStyle(p, null).fontFamily; 

Computed styles are quirky, and querying them does not always provide the information you want. Consider the typeface example just shown. The CSS font-family attribute accepts a comma-separated list of desired font families for cross-platform portability. When you query the fontFamily attribute of a computed style, you're simply getting the value of the most specific font-family style that applies to the element. This may return a value such as "arial,helvetica,sans-serif", which does not tell you which typeface is actually in use. Similarly, if an element is not absolutely positioned, attempting to query its position and size through the top and left properties of its computed style often returns the value "auto". This is a perfectly legal CSS value, but it is probably not what you were looking for.