如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法。
1、所有元素全部清除样式
2、给当前元素设置样式
例子:
点击当前按钮时,按钮背景色改变。
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// console.log('23');
// 先将所有按钮颜色去掉
for(var j = 0; j < btns.length; j++){
btns[j].style.backgroundColor = 'white';
}
// 将当前点击的颜色改变
this.style.backgroundColor = 'pink';
}
}
</script>
点击前,选中按钮3,按钮3为粉色
点击后,选中按钮5,按钮3的样式先清除,再增加按钮5的样式
常用地方
制作轮播图时,下面的小点会用到,当变换选中页面时,原来选中的小点样式需要清空,后面选中小点样式需要增加。