Dom——排他思想

排他思想

概念

排他思想：如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法

1. 所有元素全部清除样式
2. 给当前元素设置样式
3. 注意顺序不能颠倒

案例

效果如上图所示。

当鼠标点击一个按钮时，该按钮背景颜色改变，其余按钮颜色不变；当鼠标点击另外一个按钮时，那个按钮背景颜色发生改变，其余按钮背景颜色恢复原样。

代码

html部分

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

javascript部分

<script>
    var btns = document.getElementsByTagName('button');
    // 用for循环遍历所有按钮
    for (i = 0; i < btns.length; i++) {
   
        btns[i].onclick = function() {
   
            for (let i = 0; i < btns.length; i++) {
   
            // 清除所有样式
                btns[i].style.backgroundColor = '';
            }