原生JS实例练习——控制div属性—— JS学习笔记2015-8-4(第93天)
截止到目前阶段，对于JS的基础知识已经可以说大致掌握了，根据自身学习经验，我认为在实例中学习是最好的，这样记忆也最深，掌握的也就牢固些；
这里要感谢“淘宝昂天” 前辈的无私分享；http://js.fgm.cc/learn/
实例1:控制div属性
1 <!DOCTYPE html> 2 <html> 3 </html> 4 <head> 5 <meta charset="utf-8" /> 6 <title>控制div属性</title> 7 <style> 8 #outer{width:500px;margin:0 auto;padding:0;text-align:center;} 9 #div1{width:100px;height:100px;background:black;margin:10px auto;display:block;} 10 </style> 11 <script> 12 var changeStyle = function (elem, attr, value) 13 { 14 elem.style[attr] = value 15 }; 16 window.onload = function () 17 { 18 var oBtn = document.getElementsByTagName("input"); 19 var oDiv = document.getElementById("div1"); 20 var oAtt = ["width","height","background","display","display"]; 21 var oVal = ["200px","200px","red","none","block"]; 22 23 for (var i = 0; i < oBtn.length; i++) 24 { 25 oBtn[i].index = i; 26 oBtn[i].onclick = function () 27 { 28 29 changeStyle(oDiv, oAtt[this.index], oVal[this.index]); 30 this.index == oBtn.length - 1 && (oDiv.style.cssText = ""); // 这一行代码的主要功能就是让div的样式回到最初的状态；把刚刚所有添加的样式都清空了，当点击到最后一个按钮的时候，也就是oBtn.length-1 的时候； 31 } 32 } 33 }; 34 </script> 35 </head> 36 <body> 37 <div id="outer"> 38 <input type="button" value="变宽" /> 39 <input type="button" value="变高" /> 40 <input type="button" value="变色" /> 41 <input type="button" value="隐藏" /> 42 <input type="button" value="重置" /> 43 <div id="div1"></div> 44 </div> 45 <!-- 46 <script> 47 /* will's script 48 思路整理： 49 在这个小例子中，如果按照笨办法来写的话会产生比较多的代码，显得冗余； 50 这里面都是会重复用到修改DIV的样式，所以应该用到函数，那么函数的参数是不一定的 51 所以这里会引入不同的参数，也就是“传参”； 52 53 所以在这个小例子中间就包含了：函数，传参，数组，自定义属性，for循环，CSS-DOM等知识 54 对于我这样的初学者来说，给作者点个赞 55 56 57 */ 58 这是本办法： 59 60 var oBtn = document.getElementsByTagName('input'); 61 var oDiv = document.getElementById('div1'); 62 63 oBtn[0].onclick = function(){ 64 //alert(100); 65 oDiv.style.width += "200px"; // 这里的属性，必须用引号括起来; 66 } 67 68 </script>--> 69 </body> 70 </html>
