排他思想，迴圈
阿新 • • 發佈：2022-05-19
效果圖：
<body> <button>按鈕</button> <button>按鈕</button> <button>按鈕</button> <button>按鈕</button> <button>按鈕</button> </body> <script> /* 如果有同一組元素,我們想要某一個元素實現某種樣式 ,需要用到迴圈的排他思想演算法: 1.所有元素全部清除樣式(幹掉其他人) 2.給當前元素設定樣式(留下我自己) 3.注意順序不能顛倒,首先幹掉其他人,再設定自己 */ // 獲取所有按鈕元素 var btns = document.querySelectorAll('button'); // btns得到的是偽陣列 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>