排他思想

一、目的：

如果有一组元素，我们想要实现某一个元素单独的实现某种样式，那么就需要用到排他思想

二、思路：

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>

四、总结：

  • 排他思想可以用在在一组元素中对某个元素单独使用样式
  • 先清除所有元素的样式（干掉所有人）
  • 再将某元素设置样式（留下我自己）
  • 顺序不能颠倒
posted @ 2021-05-25 20:46  L-L  阅读(158)  评论(0)  编辑  收藏  举报