用原生JS写点击元素变色的多种方法

一组数组元素，点击其中某一个数组元素，被点击的那个元素就会变色或者放大，也就是样式有修改，这是我们经常用到的功能，我们经常实现这个功能用到的一般都是两个循环，第一个循环给每个元素绑定事件，第二个循环为所有元素样式变成默认。

var headCel =document.getElementById('headerBar').children;
for(var i=0;i<headCel.length;i++){
   headCel[i].onclick = function(){
     for (var j =0;j<headCel.length;j++){
       headCel[j].style.color = '#000';
     }
     this.style.color = "#E5502E";
   }
}

 

其实用原生JS实现这个功能还有一种更简单的方法：

//点击头部小导航条绑定事件
var headli = headUl.children;
var oldindex =0 ;
for (var k = 0; k < headli.length; k++) {
　　headli[k].index=k;
//切换栏目时
　　headli[k].onclick = function () {
　　　　headli[oldindex].style.color = '#212121';
　　　　this.style.color = "#E5502E";
　　　　oldindex=this.index;
　　}
}

定义一个oldindex，为刚刚点击元素的Index，初始值为默认选择的index，一般为0，在每次不同元素点击后，将该被点击元素的Index赋值给定义的oldindex，在发生下一次点击事件的时候，就让上一次被点的元素elArr[oldindex]的样式恢复到原样，这次被点击的元素更改样式。

 

转载于:https://www.cnblogs.com/zengdi/p/9287775.html