当前位置：网站首页>DOM系列之排他思想

DOM系列之排他思想

2022-07-19 07:34:00 【老__L】

1、什么是排他思想

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

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

2、示例

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script> // 1. 获取所有按钮元素 var btns = document.getElementsByTagName("button"); // btns得到的是伪数组 里面的每一个元素 btns[i] for (var i = 0; i < btns.length; i++) {
       btns[i].onclick = function () {
       // (1) 我们先把所有的按钮背景颜色去掉 干掉所有人 for (var i = 0; i < btns.length; i++) {
       btns[i].style.backgroundColor = ""; } // (2) 然后才让当前的元素背景颜色为pink 留下我自己 this.style.backgroundColor = "pink"; }; } </script>

在这里插入图片描述

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

在这里插入图片描述