任何的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循环里面。
好了，就是这样，加油！
js自定义属性以及自定义一组开关应用
原文地址：http://www.cnblogs.com/web001/p/7892137.html