Ferris这个教程学习笔记:js示例1.1:控制div属性
//一个更为优选的方式
//1:创建二个数组 一个属性 一个值
//2:将修改元素属性功能封装成一个方法
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 4 <title>控制div属性</title> 5 <style type="text/css"> 6 #outer{width:500px;margin:0 auto;padding:0;text-align:center;} 7 #div1{width:100px;height:100px;background:black;margin:10px auto;display:block;} 8 </style> 9 </head> 10 <body> 11 <div id="outer"> 12 <input value="变宽" type="button" /> 13 <input value="变高" type="button" /> 14 <input value="变色" type="button" /> 15 <input value="隐藏" type="button" /> 16 <input value="重置" type="button" /> 17 <div id="div1"></div> 18 </div> 19 <script type="text/javascript"> 20 21 /** 22 *修改元素样式属性方法 23 *@elem 元素 24 *@key 元素样式属性 25 *@val 样式值 26 */ 27 function modify(elem,key,val){ 28 elem.style[key] = val; 29 } 30 31 window.onload = function(){ 32 var inputs = document.getElementsByTagName("input"); 33 var div = document.getElementById("div1"); 34 //按功能顺序创建数组 35 //样式属性数组 36 var keys = ["width","height","backgroundColor","display","display"]; 37 //样式属性值 38 var value = ["200px","200px","red","none","block"]; 39 40 var size = inputs.length; 41 for(var i=0;i<size;i++){ 42 inputs[i].index = i; 43 inputs[i].onclick = function(){ 44 //i值为5因为循环己经结束,如果保存索引值,添加下标值.. 45 //alert(i+":"+this.value+":"+keys[i]+":"+value[i]); 46 47 //最后一个按钮是重置，功能要求清除style属性所有值 48 this.index == inputs.length-1&&(div.style.cssText = ""); 49 50 modify(div,keys[this.index],value[this.index]); 51 }; 52 } 53 54 }; 55 </script> 56 </body> 57 </html>
