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

js中style,currentStyle和getComputedStyle的区别

时间:2017-08-03 16:54:57      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:取值   解决   current   return   put   作用   margin   null   hang   

js中style,currentStyle和getComputedStyle的区别 MarysMa 在js中用xx.style.marginTop是无法获取写在css或<sytle>标签中的margin-top之类的样式值(包括width,height等)。

这就是style属性的限制:

style

只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。(内联样式: body中标签里用style直接写的样式。)

currentStyle

可以弥补style的不足,但是只适用于IE。

getComputedStyle

同currentStyle作用相同,但是适用于FF、opera、safari、chrome。

所以兼容的取值写法:
getElementStyle: function(el,attr){
//获取el当前的attr样式,解决ie问题
return el.currentStyle?el.currentStyle[attr]:getComputedStyle(el,null)[attr];
}
 

注意:

currentStyle和getComputedStyle只能用于获取页面元素的样式,不能用来设置相关值。

如果要设置相应值,应使用style。

 
科普:
 
getComputedStyle:是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。(总而言之就是获取一堆样式。。。)语法如下:
var style = window.getComputedStyle("元素", "伪类");
 
 
顺带一提jq库的$.css()就是用getComputedStyle和getPropertyValue两者结合。
 
详细可以看文章:

获取元素CSS值之getComputedStyle方法熟悉 ? 张鑫旭

js中style,currentStyle和getComputedStyle的区别

标签:取值   解决   current   return   put   作用   margin   null   hang   

原文地址:http://www.cnblogs.com/Marys/p/7280297.html

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