更新時間:2022-07-01 來源:黑馬程序員 瀏覽量:
排他思想簡單理解就是排除掉其他的(包括自己)外后再蛤自己設(shè)置想要實觀的效果。總而言之指排他思想的實現(xiàn)步驟就是所有元素全都清除與設(shè)置當(dāng)前元素,例知,在開發(fā)中,如果有同一組元素,我們想要某一個元素實現(xiàn)某種樣式,這就需要用到循環(huán)的持他思想算法來實現(xiàn)。接下來我們通過案例的形式演示排他操作。
(1)編寫HTML結(jié)構(gòu)代碼,示例代碼如下。
<body> <button>按鈕1</botton> <button>按鈕2</botton> <button>按鈕3</botton> <button>按鈕4</botton> <botton>按鈕5</botton> </body>
(2)編寫JavaScript代碼,實現(xiàn)單擊按鈕,改變當(dāng)前按鈕背景色效果,示例代碼如下。
< seript > //獲取所有按鈕元素 var btns = docunent.getElementsByTagName('button'); //btns得到的是類數(shù)組對象,使用btns[i]訪問數(shù)組里的每一個元素 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)然后設(shè)置當(dāng)前的元素背景顏色 this.style.backgroundColor = 'pink'; } } < /script>
上述代碼中,第3行代碼獲取所有按鈕元素,存儲在btns偽數(shù)組中。第5~14行代碼使用for循環(huán)遍歷偽數(shù)組中的每一個元素btnslil。第6行代碼給每一個元素添加單擊事件。第8~10行代碼利用for循環(huán)首先把所有的按鈕背景顏色去掉,然后在第12行給當(dāng)前的元素設(shè)置背景顏色為pink。預(yù)覽效果如圖所示。