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

Source: Internet
Author: User

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

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 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

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;


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.