window.getComputedStyle()方法的使用及其扩展

1.window.getComputedStyle()方法返回值

    是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。

    语法:var style = window.getComputedStyle("元素", "伪类");  //第二个参数选填  如果不查询伪类的话可以不填或填null

2.window.getComputedStyle()和element.style的区别

    window.getComputedStyle() 和 element.styl 的相同点就是二者返回的都是 CSSStyleDeclaration 对象,取相应属性值得时候都是采用的 CSS 驼峰式写法,均需要注意 float 属性。

而不同点就是:

 a.element.style 读取的只是元素的“内联样式”,即 写在元素的 style 属性上的样式;而 getComputedStyle 读取的样式是最终样式,包括了“内联样式”、“嵌入样式”和“外部样式”。 

 b.element.style 既支持读也支持写,我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。

    c.我们可以通过使用 getComputedStyle 读取样式,通过 element.style 修改样式

3.兼容性

    ie9以下 不支持window.getComputedStyle()  但是可以用element.currentStyle

 比如我们想获取元素的高度  (element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height;

4.defaultView

    在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下,这是不需要的, 因为可以直接通过window对象调用。

    但有一种情况,你必需要使用 defaultView, 那是在 Firefox 3.6 上访问子框架内的样式 (iframe).

    而且除了在 IE8 浏览器中 document.defaultView === window 返回的是 false 外,其他的浏览器(包括 IE9 )返回的都是 true。所以后面直接使用 window 就好,不用在输入那么长的代码了。

原文地址:https://www.cnblogs.com/huoerheaven/p/8966531.html