原生javascript获取元素样式属性值的方法
更新时间：2010年12月25日 22:48:21 作者：
实际应用中, 获取元素样式在实际应用中一定常用到, 若是纯粹html中, 直接elem.style.attr就可获取, 但更多的时候我们是要从Css中获取元素的最终样式属性.
所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取.
elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值.
而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getComputedStyle获得Css的样式对象, 然后通过该对象的getPropertyValue获取属性值.
上述两种方法, 无论IE还是W3C的, 有一点是相同的, 它们所获取的是元素Css属性最终值. 这一点与Css的优先级是相同的.
有一点不同的是, IE的方法是通过Css属性的驼峰式名(如textAlign)获取, 而W3C的方法是通过元素Css原来的属性名(如text-align)获取的, 所以, 在使用W3C方法时, 需要对Css属性名做个简单的处理.
基于此, 我们可以封装一个获取元素属性值的方法, 如下:
function attrStyle(elem,attr){
if(elem.attr){
//若样式存在于html中,优先获取
return elem.style[attr];
}else if(elem.currentStyle){
//IE下获取CSS属性最终样式(同于CSS优先级)
return elem.currentStyle[attr];
}else if(document.defaultView && document.defaultView.getComputedStyle){
//W3C标准方法获取CSS属性最终样式(同于CSS优先级)
//注意,此法属性原格式(text-align)获取的,故要转换一下
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();
//获取样式对象并获取属性值
return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);
}else{
return null;
}
}
记得精通JavaScript一书中获取元素位置那一节(忘了是第6还是第7章), 有获取元素样式属性值更详细的解释. 第一次知道document.defaultVies.getComputedStyle就是从这本书来的. 很棒的一本书, 有兴趣的朋友话一定要看看.
原方发布于Mr.Think的博客: http://mrthink.net/js-get-cssproperty/
elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值.
而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getComputedStyle获得Css的样式对象, 然后通过该对象的getPropertyValue获取属性值.
上述两种方法, 无论IE还是W3C的, 有一点是相同的, 它们所获取的是元素Css属性最终值. 这一点与Css的优先级是相同的.
有一点不同的是, IE的方法是通过Css属性的驼峰式名(如textAlign)获取, 而W3C的方法是通过元素Css原来的属性名(如text-align)获取的, 所以, 在使用W3C方法时, 需要对Css属性名做个简单的处理.
基于此, 我们可以封装一个获取元素属性值的方法, 如下:
复制代码 代码如下:
function attrStyle(elem,attr){
if(elem.attr){
//若样式存在于html中,优先获取
return elem.style[attr];
}else if(elem.currentStyle){
//IE下获取CSS属性最终样式(同于CSS优先级)
return elem.currentStyle[attr];
}else if(document.defaultView && document.defaultView.getComputedStyle){
//W3C标准方法获取CSS属性最终样式(同于CSS优先级)
//注意,此法属性原格式(text-align)获取的,故要转换一下
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();
//获取样式对象并获取属性值
return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);
}else{
return null;
}
}
记得精通JavaScript一书中获取元素位置那一节(忘了是第6还是第7章), 有获取元素样式属性值更详细的解释. 第一次知道document.defaultVies.getComputedStyle就是从这本书来的. 很棒的一本书, 有兴趣的朋友话一定要看看.
原方发布于Mr.Think的博客: http://mrthink.net/js-get-cssproperty/
相关文章
这篇文章主要为大家详细介绍了Javascript实现秒表倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
javaScript 数值型和字符串型之间的转换2009-07-07
详解WordPress开发中get_current_screen()函数的使用
这篇文章主要介绍了WordPress开发中get_current_screen()函数的使用,get_current_screen()通常在对象的实例化时使用,需要的朋友可以参考下2016-01-01
做前端，需要选择元素，下面是实现代码，一个原生的html元素选择器类似jquery选择器，很棒，很实用2014-10-10
本文主要介绍了原生JS实现幻灯片的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了Javascript函数式编程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了JSON是什么？有哪些优点？JSON和XML的区别？下面就来详细的介绍两种的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
想必大家都注意到marquee的不循环滚动,所以出现了很多替代脚本，接下来为大家详细介绍下：向左滚动/图片左无缝滚动/向下滚动/图片下无缝滚动/向上滚动的实现2013-04-04
在前端开发的过程中,我们经常会遇到需要对于输入的字符串进行格式化处理,这篇文章主要给大家介绍了关于使用js去除字符串内所带有空格的三种方法,需要的朋友可以参考下2023-10-10
有些小伙伴可能会问caller,callee 是什么?在javascript 中有什么样的作用?那么本篇会对于此做一些基本介绍。希望能够对大家理解javascript中的callee与caller有所帮助。2015-08-08
最新评论