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

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];
}

 

posted @ 2017-09-23 08:55  刘槟豪  阅读(566)  评论(0编辑  收藏  举报