所谓计算样式,就是嵌入式样式、外部样式表、内联样式综合的样式表现,那么如何来获取呢?
“DOM2 级样式”增强了document.defaultView,提供了getComputedStyle()方法,可以调用最终的样式。
这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例 如":after")。如果不需要伪元素信息,第二个参数可以是null。
getComputedStyle()方法返回一 个CSSStyleDeclaration 对象(与style 属性的类型相同),其中包含当前元素的所有计算的样式。
以下面这个HTML 页面为例:
<!DOCTYPE html> <html> <head> <title>Computed Styles Example</title> <style type="text/css"> #myDiv { background-color: blue; width: 100px; height: 200px; } </style> </head> <body> <div id="myDiv" style="background-color: red; border: 1px solid black"></div> </body> </html>
js:
var myDiv = document.getElementById("myDiv"); var computedStyle = document.defaultView.getComputedStyle(myDiv, null); alert(computedStyle.backgroundColor); // "red",不是blue
后面就可以通过 computedStyle 来访问最终的样式了!
但是,边框属性可能 会也可能不会返回样式表中实际的border 规则(Opera 会返回,但其他浏览器不会)。存在这个差别的原因是不同浏览器解释综合(rollup)属性(如border)的方式不同,因为设置这种属性实际上会涉及 很多其他属性。在设置 border 时, 实际上是设置了四个边的边框宽度、颜色、样式属性( border-left-width 、border-top-color 、border-bottom-style ,等等)。因此, 即使 computedStyle.border 不会在所有浏览器中都返回值,但computedStyle.borderLeftWidth 会返回值!
但是!IE9之前版本不支持 getComputedStyle() 方法;
在IE 中,每个具有style 属性的元素还有一个 currentStyle 属性。这个属性是CSSStyleDeclaration 的实例,包含当前元素全 部计算后
的样式。取得这些样式的方式也差不多,如下面的例子所示。
var myDiv = document.getElementById("myDiv"); var computedStyle = myDiv.currentStyle; alert(computedStyle.backgroundColor); //"red"
所以兼容下IE9之前版本,代码就是这个样子:
var myDiv = document.getElementById("myDiv"); var computedStyle = document.defaultView?document.defaultView.getComputedStyle(myDiv, null):myDiv.currentStyle; alert(computedStyle.backgroundColor); // "red",不是blue
当然除了这个方法,js高程里还有另外一个方法,去获取样式表的内容,然后一个个去调用样式表,去改,但是我觉得太麻烦了,要学的去翻书哦~
参考资料: