js 排他思想案例 

 1  <!-- 排他思想 -->
 2 
 3     <button>按钮1</button>
 4     <button>按钮2</button>
 5     <button>按钮3</button>
 6     <button>按钮4</button>
 7     <button>按钮5</button>
 8     <script>
 9         var btns = document.getElementsByTagName("button")
10         for (var i = 0; i < btns.length; i++) {
11             btns[i].onclick = function () {
12                 // 首先把使用的按钮背景颜色去掉
13                 for (var j = 0; j < btns.length; j++) {
14                     btns[j].style.backgroundColor = ''
15                 }
16                 // 然后设置当前的元素背景颜色
17                 this.style.backgroundColor = 'pink'
18             }
19         }
20         // 首先先排除其他
21         // 然后设置自己的样式这个叫排他样式
22     </script>

 

posted @ 2020-03-31 12:12  徐12  阅读(582)  评论(0)  编辑  收藏  举报