一、使用场合
如果有同一组元素，想要其中某一个元素实现某种样式， 而其他元素为默认样式，需要用到循环的排他思想算法。
二、具体思路
1. 所有元素全部清除样式
2. 给当前元素设置样式
3. 注意顺序不能颠倒，首先清除所有元素样式，再设置选中元素样式
三、代码验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
// 当有许多元素要求选择其中一个元素其余为默认元素时运用排他思想
var btns = document.querySelectorAll('button');
// 获取过来是伪数组 btns[i]为当前元素
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
// 1、首先清除所有元素要设置的样式
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
// 2、随后对点击的那个元素设置样式
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
</html>四、效果展示
点击不同按钮，当前按钮 变为粉色，其余按钮保持默认颜色。
扫一扫
453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
