The use of the window.getComputedStyle () method and its extension

1.window.getcomputedstyle () method return value

is a CSS property value that can get all the final use of the current element. Returns a CSS style declaration object ([object Cssstyledeclaration]), read-only.

Syntax: var style = window.getComputedStyle ("element", "Pseudo-class"); The second parameter is optional if you do not query the pseudo-class, you can not fill out or fill null

The difference between 2.window.getcomputedstyle () and Element.style

window.getComputedStyle () and element.styl the same point is that both return is the Cssstyledeclaration object, take the corresponding attribute is worth time is used in the CSS camel style, all need to pay attention to float attributes.

And the difference is:

 a.element.styleReads only the element's inline style, which is the style that is written on the element's style property, while the getComputedStyle read style is the final style, including inline styles, embedded styles, and external styles.

 b.element.styleBoth support read and write support, we element.style can rewrite the style of the element. getComputedStylewriting is not supported for read-only support.

C. We can getComputedStyle modify the style by using the Read style element.style

3. Compatibility

IE9 below is not supported window.getComputedStyle () but can be used Element.currentstyle

For example, we want to get the height of the element (Element.currentstyle element.currentStyle:window.getComputedStyle (element, null)). Height;

4.defaultView

In many of the online demo code, getComputedStyle is called through the Document.defaultview object. In most cases, this is not required because it can be called directly from the Window object.

But in one case, you have to use DefaultView, which is to access the style (IFRAME) within the child frame on Firefox 3.6.

and document.defaultView === window false other browsers (including IE9) return all except those returned in the IE8 browser true . So window it is good to use the back directly, not in the input so long code.

The use of the window.getComputedStyle () method and its extension