一、目的:
如果有一组元素,我们想要实现某一个元素单独的实现某种样式,那么就需要用到排他思想
二、思路:
1.清除所有元素样式
2.给当前元素设置样式
三、示例:
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<script>
var btn = document.querySelectorAll('button');
for (var i = 0; i < btn.length; i++) {
// btn 得到的是伪数组 里面的每一个元素是 btn[i]
btn[i].onclick = function () {
// 干掉所有人
for (var i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = '';
}
// 留下我自己
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
四、总结:
- 排他思想可以用在在一组元素中对某个元素单独使用样式
- 先清除所有元素的样式(干掉所有人)
- 再将某元素设置样式(留下我自己)
- 顺序不能颠倒