可以直接通过style获取和设置CSS样式，那么有没有更简洁的方法呢？可以借助于函数使用JS的内置对象arguments完成，所谓arguments，就是可变参，不定参，参数的个数可变，是一个参数数组，无需指出参数名，就可访问他们，但是为了增强可读性，给参数取名，还是很有必要的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> </head> <body> <div></div> <script> //获取行间样式 function css(){ //如果传入参数的个数等于 if(arguments.length==){ //则返回第二个参数样式名的值 return arguments[].style[arguments[]]; } else{ //否则就是设置CSS样式 //第二个参数样式名的值就等于传入的第三个参数 arguments[].style[arguments[]]=arguments[]; } } var oDiv=document.getElementById('div'); alert(css(oDiv,'width')); //获取对象的宽 返回：px css(oDiv,'background','green'); //将对象的背景颜色改为绿色 </script> </body> </html>
下面是一个获取和设置行间样式的封装函数，以便以后使用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>获取行间样式</title> <script> function css(obj, name, value){ if(arguments.length==){ return obj.style[name]; } else{ obj.style[name]=value; } } </script> </head> <body> <div></div> <script> var oDiv=document.getElementById('div'); alert(css(oDiv,'width')); //获取div的宽 css(oDiv,'background','green'); //设置div的背景颜色 </script> </body> </html>
我们都知道，在实际的WEB项目开发中，要遵循结果、表现、行为相分离的原则，以增强可读性，优化代码，便于后期维护。所以通常我们设置元素的样式，并非都是在行间设置。使用style方法获取的只是DOM元素style属性里的样式规则，对于通过class属性设置的外部样式表，style就显得力不从心了。那要如何获取元素的非行间样式呢？DOM标准中有个全局方法getComputedStyle，通过该方法可以获取当前对象的样式信息。比如：getComputedStyle(obj, false).paddingLeft，可以获取到对象的左内边距。这里需要注意：在获取元素的复合样式时，一定要使用精确的值，复合样式比如background、border，如果要获取元素的背景颜色，只使用background会出错，一定要写成backgroundColor。
JS只能修改元素的行间样式，并不能修改获取到的非行间样式。那么很多人可能会产生疑问，既然可以获取到又不能修改，那还获取有什么用。其实获取非行间样式是非常有必要的，如果是外部样式表，样式都是密密麻麻一片英文的存在，不可能一个个去找，到底该元素设置的什么样子，再回头修改，那岂不是太浪费精力了，所以该方法就显得尤为重要，而且返回的值都是精确值，通过获取的非行间样式信息，也有利于更精细的修改元素的当前样式，这是多么美妙的一件事，直接使用style设置元素的行间样式，因为行间样式的优先级最高，所以就覆盖掉了非行间样式，其实也就相当于跟修改了非行间样式一样，只是显示在了行间，我们目的反着是已经达到了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>获取非行间样式</title> <style> #div{ width:px; height:px; background:red; margin-top:px; } </style> <script> window.onload=function (){ var oDiv=document.getElementById('div'); alert(getComputedStyle(oDiv,false).width); oDiv.style.width='px'; alert(getComputedStyle(oDiv,false).height); oDiv.style.height='px'; //注意这里修改复合样式时，使用的background，可在FF下用Firebug查看具体的行间样式。 alert(getComputedStyle(oDiv,false).backgroundColor); oDiv.style.background='green'; }; </script> </head> <body> <div></div> </body> </html>
(4)、对事件做出响应
实例：全选和反选，输入对应的序号选中