获取css属性的style getComputedStyle currentStyle三种方法的区别总结

Posted 2020-10-08

css中有三种样式，分别是内嵌样式 内部样式 外部样式表

1.style

语法：element.style.xxx 这种只能取得内嵌样式的属性，获取样式能读能写

2.currentStyle

语法：element.currentStyle[xxx] 可以取得内部和外部样式，但是只兼容ie浏览器，获取的样式只能读

实例：document.creatElement(‘div‘).currentStyle[‘width‘]  取得元素的宽度

3.getComputedStyle

语法： window.getComputedStyle(element,null).xxx     document.defaultView.getComputedStyle(element,null).xxx

作用和currentStyle一样但是不适用于ie浏览器，会获得元素所有原始样式，即使这个元素什么样式也没有设置，其中第二种写法源于jQuery源码写法，是.css（）的底层操作方法。

可以写一个函数用于兼容所有浏览器获得其样式

function getStyle(element,property) {
          return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(element,false)[property] : element.currentStyle[property];
}