使用 Dom 的 getComputedStyle 方法获取元素的样式
以下代码的测试环境为:
- chrome canary 60
- Firefox 53.0.3
- opera 45.0
- IE 11,9,8
移动端的浏览器测试暂时未测试,有时间加上
之前偶尔有一次要更改伪类元素 ::after
的样式的时候看到过 getComputedStyle 方法,但是并没有在意。最近又在一次的读 《JavaScript 高级程序设计》 这本书的时候,在 DOM2 和 DOM3 扩展的地方看到了这个方法,于是深究了一下。
一、getComputedStyle用法
- 1
- 2
或者
- 1
- 2
首先是有两个参数,元素和伪类。第二个参数不是必须的,当不查询伪类元素的时候可以忽略或者传入 null
。
使用示例:
- 1
- 2
- 3
关于 defaultView 引用一下 MDN 对于defaultView 的描述
defaultView
在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下,这是不需要的, 因为可以直接通过window对象调用。但有一种情况,你必需要使用 defaultView, 那是在 Firefox 3.6 上访问子框架内的样式 (iframe).
而且除了在 IE8 浏览器中 document.defaultView === window
返回的是 false
外,其他的浏览器(包括 IE9 )返回的都是 true
。所以后面直接使用 window
就好,不用在输入那么长的代码了。
二、返回值
getComputedStyle
返回的对象是 CSSStyleDeclaration 类型的对象。取数据的时候可以直接按照属性的取法去取数据,例如 style.backgroundColor
。需要注意的是,返回的对象的键名是 css 的驼峰式写法,background-color -> backgroundColor。
需要注意的是 float
属性,根据 《JavaScript 高级程序》所描述的情况 ,float
是 JS 的保留关键字。根据 DOM2 级的规范,取元素的 float
的时候应该使用 cssFloat
。其实 chrome 和 Firefox 是支持 float
属性的,也就是说可以直接使用
- 1
- 2
而在任何版本的 IE 中都不能这样使用,并且在 IE 8 中仅支持 styleFloat
,这个下面的兼容性问题中谈到。
三、和 style 的异同
getComputedStyle
和 element.style
的相同点就是二者返回的都是 CSSStyleDeclaration 对象,取相应属性值得时候都是采用的 CSS 驼峰式写法,均需要注意 float
属性。
而不同点就是:
element.style
读取的只是元素的“内联样式”,即 写在元素的 style 属性上的样式;而getComputedStyle
读取的样式是最终样式,包括了“内联样式”、“嵌入样式”和“外部样式”。
-
element.style
既支持读也支持写,我们通过element.style
即可改写元素的样式。而getComputedStyle
仅支持读并不支持写入。我们可以通过使用
getComputedStyle
读取样式,通过element.style
修改样式
四、兼容性
关于 getComputedStyle
的兼容性问题,在 Chrome 和 Firefox 是支持该属性的,同时 IE 9 10 11 也是支持相同的特性的,IE 8并不支持这个特性。 IE 8 支持的是 element.currentStyle
这个属性,这个属性返回的值和 getComputedStyle
的返回基本一致,只是在 float
的支持上,IE 8 支持的是 styleFloat
,这点需要注意。