DOM编程③ -- 排他思想-CFANZ编程社区

DOM编程③ -- 排他思想

文章目录

什么是排他思想
案例：

什么是排他思想

如果有同一组元素，我们想要某一个元素实现某种样式(它实现的时候，别人不能实现这种样式)，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

案例：

DOM编程③ -- 排他思想_i++

点击哪个按钮，那个按钮变成粉色背景，不能同时存在多个！

代码实现：

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

    <script>let buttons = document.getElementsByTagName('button');
        for(let i = 0;i < buttons.length;i++){
            buttons[i].onclick = function(){
                for(let n = 0;n < buttons.length;n++){
                    buttons[n].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }</script>
</body>
</html>

0 条评论