js学习（二）

来源：互联网发布：广州拓飞涉密数据恢复编辑：程序博客网时间：2024/06/06 06:49

练习来源：http://fgm.cc/learn/

控制div属性

源代码：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>控制div属性</title><style> #outer{width:500px;margin:0 auto;padding:0;text-align:center;}#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}</style>                 <script>     var changeStyle=function(elem,attr,value){       // console.log(4)         elem.style[attr]=value     };     window.onload=function(){        //console.log(1)        var oBtn = document.getElementsByTagName("input");        var oDiv = document.getElementById("div1");        var oAtt = ["width","height","background","display","display"];        var oVal = ["200px","200px","red","none","block"];         for(var i=0;i<oBtn.length;i++){            //console.log(2);             oBtn[i].index=i;             oBtn[i].onclick=function(){                //console.log("index"+this.index);                 this.index==oBtn.length-1&&(oDiv.style.cssText="");                 changeStyle(oDiv,oAtt[this.index],oVal[this.index])             }         }     }; </script></head><body>       <div id="outer"><input type="button" value="变宽"/><input type="button" value="变高"/><input type="button" value="变色"/><input type="button" value="隐藏"/><input type="button" value="重置"/><div id="div1"></div></div></body></html>

结果部分暂时展示

编写代码中遇到的问题：

1.为什么用index？

解：因为当每个oBtn在点击的时候，是在for循环结束后才执行。这个时候i的值已经试oBtn.length了。这个index是给btn添加私有属性，在用的时候可以知道这个btn在序列中是第几个。（感谢网友）

2.this.index==oBtn.length-1&&(oDiv.style.cssText="");这句话是什么意思？

这句话等同于if((this.index)==oBtn.length-1){ oDiv.style.cssText="";}

阅读全文

0 0