js自定义属性以及自定义一组开关应用 - 麦兜家园

任何的html标签都有自己的一个属性，当时那都是它本身的固定属性，而我们在项目中可能会遇到需要给标签添加一些自定义的属性，去判断替换内容或者赋值等等，那么就需要给标签设定一个属性来作为判断标准或者赋值的标准，所以今天就来谈谈给标签自定义属性的一个小应用。

案例：三个div有背景色，想要达到效果是点击任何一个给替换颜色再次点击，还给还原回来，各自的div不影响其他的div，也可以都点击都变色，相反都还原。

好的，话不多说，我们来看代码，先来看下简单的布局：

 1 <style>
 2    ul,li{list-style: none;}
 3    ul{overflow: hidden;}
 4    li{width:200px;height:200px;background-color:#f1f1f1;margin:100px 15px;float:left;}
 5 </style>
 6 <body>
 7 <ul id="list">
 8     <li></li>
 9     <li></li>
10     <li></li>
11 </ul>
12 </body>

目前不加js的效果就是三个灰色的方形，那么来看js

 1 <script>
 2     window.onload= function(){
 3      var List=document.getElementById("list");//先获取到最外面的ul
 4      var aLi=List.getElementsByTagName("li");//然后获取li
 5 
 6         for(var i=0;i<aLi.length;i++){
 7             aLi[i].onOff=true;//这里不仅是一个开关来判断，假设当前开关若为真
 8             aLi[i].onclick=function(){
 9                 if(this.onOff){//如果当前开关为真，一定要记得加this，主要是指出当前开关，那么就执行下面的代码
10                     this.style.backgroundColor="#ff0";
11                     this.onOff=false;//这里要把它恢复为假
12                 }else{//否则就执行下面的代码，记得也要恢复为真，这样就可以随意切换
13                     this.style.backgroundColor="#f1f1f1";
14                     this.onOff=true;
15                 }
16 
17             }
18         }
19     };
20 </script>

好的，就是这样，主要需要提醒的就是因为要div互不影响，在设置开关来控制的时候，一定是各自是各自的开关，所以必须写进for循环里面。

好了，就是这样，加油！

posted on 2017-11-24 19:51 麦兜家园阅读(1079) 评论(0) 收藏举报

刷新页面返回顶部