任何的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.οnlοad= 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].οnclick=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循环里面。
好了,就是这样,加油!