用currentStyle,getComputedStyle来获取非行间的CSS样式。同时用可变参arguments来获取和设置CSS样式。
这篇是上一篇js用currentStyle和getComputedStyle获取css样式(非行间)的延伸版,注释的比较清楚。同时还加入了设置样式的css函数。希望对大家有帮助。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #div1{500px; height:200px; background:red;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS获取非行间样式,封装css函数设置css样式</title> <script type="text/javascript"> function getStyle(obj,attr) //获取非行间样式,传两个参数,obj是获取对象,attr是值 { if(obj.currentStyle) //currentStyle针对IE浏览器获取非行间样式 { return obj.currentStyle[attr]; //返回对象的值 }else { return getComputedStyle(obj, false)[attr]; //getComputedStyle针对非IE浏览器 }; }; function css(obj, attr, value) //传三个参数 对象,样式,值。传参时不一定传3个参数,传2个参数时为获取样式,3个时是设置样式 { if(arguments.length==2) //arguments参数数组,当参数数组长度为2时表示获取css样式 { return getStyle(obj,attr); //返回对象的非行间样式的值用上面的getStyle函数 }else if(arguments.length==3) //当传三个参数时为设置对象的某个值 { obj.style[attr]=value; } }; window.onload=function() { var oDiv=document.getElementById('div1'); var oBtn=document.getElementById('btn'); oBtn.onclick=function() { css(oBtn,'backgroundColor','green'); //传三个参数当点击按钮时把按钮的背景色变成绿色 alert(css(oDiv, 'width')); //传两个参数时弹出div的颜色 }; }; </script> </head> <body> <input type="button" value="样式" id="btn" /> <div id="div1"></div> </body> </html>