javascript通用获取元素样式属性值代码实例
本章节分享一段代码实例,它实现了具有通用效果的获取元素指定样式属性值的功能。无论是使用ele.style.attr方式定义的属性还是样式表定义的属性,都可以获取。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> #antzone{ width:200px; height:100px; background-color:#ccc; text-align:center; line-height:100px; } </style> <script type="text/javascript"> function getStyle(elem, name) { if (elem.style[name]) { return elem.style[name]; } else if (elem.currentStyle) { return elem.currentStyle[name]; } else if(document.defaultView && document.defaultView.getComputedStyle){ name = name.replace(/([A-Z])/g, "-$1"); name = name.toLowerCase(); var s = document.defaultView.getComputedStyle(elem, ""); return s && s.getPropertyValue(name); } else { return null; } } window.onload=function(){ var odiv=document.getElementById("antzone"); odiv.innerHTML=getStyle(odiv,"backgroundColor"); } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function getStyle(elem, name) {},此方法实现了获取功能,第一个参数元素对象,第二个参数是属性的名称,符合属性支持类似"backgroundColor"和"background-color"两种形式。
(2).if (elem.style[name]) {
return elem.style[name];
},如果是属性是使用style定义的,那么就使用此种方式获取。
(3).else if (elem.currentStyle) {
return elem.currentStyle[name];
},此方式是针对IE8和IE8以下浏览器。
(4). else if(document.defaultView && document.defaultView.getComputedStyle),针对标准浏览器。
(5).name = name.replace(/([A-Z])/g, "-$1")此代码就是为了将backgroundColor形式转换为background-color。
(6).name = name.toLowerCase(),转换为小写形式。
(7).var s = document.defaultView.getComputedStyle(elem, ""),获取元素的css样式对象。
(8).return s && s.getPropertyValue(name),获取指定名称的属性值。
二.相关阅读:
(1).currentStyle可以参阅getComputedStyle()和currentStyle属性的一章节。
(2).replace()方法可以参阅正则表达式replace()一章节。