在本章中,有一个重要的属性,就是getComputedStyle,它是document.defaultView中的方法,它接受两个参数,要取得计算样式的元素和一个伪元素的字符串(如‘after’),如果不需要伪元素的信息,第二个参数可以为null。getComputedStyle方法,返回一个CSSStyleDeclaration的对象,其中包含当前元素计算后的总样式。
在IE中,不支持getComputedStyle方法,在IE中,每个具有style属性的元素还有一个currentStyle属性。这个属性是CSSStyleDeclaration的对象的实例,包含当前元素计算后的所有样式。
1 <style> 2 #test {background-color: red; 3 width: 100px; 4 height: 100px;} 5 </style> 6 </head> 7 <body> 8 <div id="test" style="background-color: blue;border:1px solid black"></div> 9 <script> 10 var div = document.getElementById('test'); 11 var t = document.defaultView.getComputedStyle(div)||div.currentStyle; 12 alert(t.backgroundColor); 13 alert(t.width); 14 alert(t.height); 15 alert(t.border);//某些浏览器会返回值 16 </script>
对border而言,在一些浏览器中会包含其他多个属性,所以像Firefox,IE中不返回border属性,而Chrome返回的也不一定是实际设置的值。