getComputedStyle的应用

后面有例子，所以把HTML,CSS样式写在前面

HTML结构：

<div id="myDiv" style="background-color: lightseagreen; border: 5px solid #ccc;"></div>

CSS样式：

#myDiv{
  width: 200px;
  height: 200px;
  background-color: red;            
}

1.先来解释下getComputedStyle

  getComputedStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算样式。

  其语法：

接受两个参数：参数1 element表示用于计算样式的元素；参数2 pseudoElt表示伪元素，若没有可用null代替

上面信息参考自这里 。

另外通过查找其他一些资料看到也有这样写的：

var style = document.defaultView.getComputedStyle(element,[pseudoElt]);

与之前的语法相比参数相同，不同之处很明显不用说了吧。window与document.defaultView有什么区别呢,稍等去查下资料。

要补充一点，参数2可省略不写。

2.兼容性

getComputedStyle()方法兼容性放面还是不错滴，来人！上证图！

如图，除了不兼容IE8之前的，其他主流浏览器都兼容，可以放心大胆的使用了。

“等等，这位小哥，那IE6~8怎么办？”

“这个嘛，有办法！”

3.currentStyle支持IE6~8

在IE中，每个具有style属性的元素还有一个currentStyle属性。

其语法是：element.currentStyle.attribute或element.currentStyle['attribute'];

例

div.currentStyle.width;

或者

div.currentStyle['width'];

4.该说说defaultView了

  defaultView是什么鬼，还真不知道，马上Google一下在mozilla上查到一点信息：在浏览器中，该属性返回当前 document 对象所关联的 window 对象，如果没有，会返回 null。

兼容性方面：根据 quirksmode，IE 9 以下版本不支持 defaultView。

测试一下与window的关系

alert(document.defaultView==window);//true

返回的结果是true,哇咔咔咔再测测全等于是不是返回的也是true

alert(document.defaultView===window);//true

弹出的结果也是true。

既然这样我干嘛不用语句短的那个呢。由语法一得知getComputedStyle()方法本身就存在于window全局对局对象中，是不是可以这样写

var comput = getComputedStyle(div);    

经测试完全可以！

5.style

style用于获取或设置元素的内联样式，内部样式和外部样式用style是获取不到的。

获取内部样式的height属性值：

alert(div.style.height);

弹出结果如图：

获取内联样式：

alert(div.style.border);

弹出结果如图：

显然可以获取得到，不知道细心的你发现没有我在内联样式设置的border颜色使用十六进制设置的弹出的却是rgb格式的。测试主要是在Google浏览器，又试了火狐、Opera、Safari浏览器测试返回的都是rgb格式（IE因为没有条件暂时没有测试，有兴趣的可以测一下）。

6.总结

叨叨了不少，来个总结吧！

getComputedStyle()获取的是计算机（浏览器）计算后的样式，兼容除IE6~8之外的其他主流浏览器，只读。

currentStyle仅支持IE浏览器，作用与getComputedStyle一样，但是用法不同。

style用于获取或设置元素的内联样式，内部样式和外部样式用style则获取不到。

有错误或表达不准确之处，欢迎指正。