任何的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循环里面。
好了，就是这样，加油！
时间： 2024-08-29 07:32:21