标签：
1 <!doctype> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <style> 6 #div1{width: 100px;height: 100px;background: red;} 7 </style> 8 <script> 9 10 window.onload=function(){ 11 var oControl=document.getElementById(‘control‘); 12 var oBut=oControl.getElementsByTagName(‘button‘); 13 var oDiv=document.getElementById(‘div1‘); 14 // oBut[0].onclick=function(){ 15 // oDiv.style.width=200; 16 // } 17 // oBut[1].onclick=function(){ 18 // oDiv.style.height=300; 19 // } 20 var oAtt=[‘width‘,‘height‘,‘background‘,‘display‘,‘display‘]; 21 var oVal=[‘200px‘,‘200px‘,‘blue‘,‘none‘,‘block‘]; 22 var changeStyle=function(elem,attr,value){ 23 elem.style[attr]=value; 24 25 } 26 for(var i=0;i<oAtt.length;i++) 27 { 28 oBut[i].index=i; 29 oBut[i].onclick=function(){ 30 this.index == oBut.length - 1 && (oDiv.style.cssText = ""); 31 //这里的this代表当前的oBut，当this.index等于oBut.length - 1时，后面的oDiv.style.cssText = ""这句会执行 32 changeStyle(oDiv,oAtt[this.index],oVal[this.index]); 33 } 34 } 35 }; 36 </script> 37 </head> 38 <body> 39 <div id="control"> 40 <button>变宽</button> 41 <button>变高</button> 42 <button>变色</button> 43 <button>隐藏</button> 44 <button>重置</button> 45 <div id="div1"></div> 46 </div> 47 </body> 48 </html>
标签：
原文地址：http://www.cnblogs.com/fycode-web/p/4685526.html
