js中style,currentStyle和getComputedStyle的区别

2021-06-14 06:03

阅读：344

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

js中style,currentStyle和getComputedStyle的区别 MarysMa 在js中用xx.style.marginTop是无法获取写在css或标签中的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

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：js中style,currentStyle和getComputedStyle的区别
文章链接：http://soscw.com/index.php/essay/93923.html

亲，登录后才可以留言！