JS中排他思想

最新推荐文章于 2023-07-20 11:13:09 发布

Var521

最新推荐文章于 2023-07-20 11:13:09 发布

阅读量1.3k

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/Var521/article/details/104563299

版权

在这里插入图片描述
点击按钮，点击的按钮变成粉色。其他均不变色，利用了排他算法：
1.所有元素全部清除样式
2.给当前元素设置样式
3.注意顺序不能颠倒，首先要把除自己外的其他人干掉，在设置自己。

<body>
     <div>
         <button>按钮1</button>
         <button>按钮2</button>
         <button>按钮3</button>
         <button>按钮4</button>
         <button>按钮5</button>
     </div>

    <script>
        //获取所有button集合
        var btns = document.getElementsByTagName('button');
        //为每一个button写一个点击事件
        for(var  i = 0; i < btns.length; i++){
            btns[i].onclick = function(){
                //点击前 先把每个按钮都设置为无色
                for(var i = 0; i < btns.length; i++){
                    btns[i].style.backgroundColor = '';
                }
                //点击时当前按钮设置为粉色
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
 </body>

Var521

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS中排他思想

点击按钮，点击的按钮变成粉色。其他均不变色，利用了排他算法：1.所有元素全部清除样式2.给当前元素设置样式3.注意顺序不能颠倒，首先要把除自己外的其他人干掉，在设置自己。<body> <div> <button>按钮1</button> <button>按钮2</button&...
复制链接

扫一扫