首页 > 代码库 > JavaScript window.getComputedStyle()
JavaScript window.getComputedStyle()
一、window.getComputedStyle()
getComputedStyle
是一个可以获取当前元素所有最终使用的 CSS 属性值。返回的是一个 CSS 样式声明对象 ([object CSSStyleDeclaration]),只读。
二、getComputedStyle 与 style 的区别
1. 只读与可写
正如上面提到的
getComputedStyle
方法是只读的,只能获取样式,不能设置;而element.style
能读能写,能屈能伸。
2. 获取的对象范围
getComputedStyle
方法获取的是最终应用在元素上的所有 CSS 属性对象(即使没有 CSS 代码);而element.style
只能获取元素style
属性中的 CSS 样式。因此对于一个光秃秃的元素<p>
,getComputedStyle
方法返回对象中length
属性值(如果有)就是190+
(据我测试 FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style
就是0
。
三、window.getComputedStyle 与 document.defaultView.getComputedStyle
jQuery 源代码,其 css()
方法实现不是使用的 window.getComputedStyle
而是 document.defaultView.getComputedStyle
,其实是等价的,但是有一点,在 FireFox3.6 上只能使用 defaultView
方法搞定框架(frame)样式。
四、getComputedStyle 与 currentStyle
getComputedStyle 并不支持 IE6 ~ IE8,所以需要使用 currentStyle 兼容 IE 浏览器。所以想获取一个元素的高度,可以这样写:
element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height
五、getPropertyValue 方法与 getAttribute 方法
getPropertyValue
方法可以获取 CSS 样式申明对象上的属性值(直接属性名称):
window.getComputedStyle(element, null).getPropertyValue("float");
如果我们不使用 getPropertyValue
方法,直接使用键值访问,也是可以的。但是,比如这里的的float
,如果使用键值访问,就要写成 cssFloat
与 styleFloat
,自然需要浏览器判断了,比较麻烦!
getPropertyValue 方法同样不支持 IE6 ~ IE8,所以西需要使用 getAttribute 兼容 IE 浏览器(需要驼峰写法)。
六、总结
最终,想要使用 getComputedStyle 方法获取元素的属性的兼容性写法:
var oStyle = this.currentStyle? this.currentStyle : window.getComputedStyle(this, null); if (oStyle.getPropertyValue) { alert("getPropertyValue下背景色:" + oStyle.getPropertyValue("background-color")); } else { alert("getAttribute下背景色:" + oStyle.getAttribute("backgroundColor")); }
参考:http://www.zhangxinxu.com/wordpress/?p=2378
JavaScript window.getComputedStyle()