码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-23 10:47:08      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:null   没有   func   doc   return   区别   gets   win   compute   

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

 

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

标签:null   没有   func   doc   return   区别   gets   win   compute   

原文地址:http://www.cnblogs.com/liubinghaoJavaScript/p/7580148.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!