js自定义属性以及自定义一组开关应用
Posted 麦兜家园
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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循环里面。
好了，就是这样，加油！
以上是关于js自定义属性以及自定义一组开关应用的主要内容，如果未能解决你的问题，请参考以下文章
Ext 6.5.3 classic版本，自定义实现togglefield开关控件
VSCode自定义代码片段12——JavaScript的Promise对象