首頁技術文章正文

什么是排他思想?

更新時間:2022-07-01 來源:黑馬程序員 瀏覽量:

IT培訓班

排他思想簡單理解就是排除掉其他的(包括自己)外后再蛤自己設置想要實觀的效果??偠灾概潘枷氲膶崿F(xiàn)步驟就是所有元素全都清除與設置當前元素,例知,在開發(fā)中,如果有同一組元素,我們想要某一個元素實現(xiàn)某種樣式,這就需要用到循環(huán)的持他思想算法來實現(xiàn)。接下來我們通過案例的形式演示排他操作。

(1)編寫HTML結構代碼,示例代碼如下。

<body>
  <button>按鈕1</botton>
  <button>按鈕2</botton>
  <button>按鈕3</botton>
  <button>按鈕4</botton>
  <botton>按鈕5</botton>
</body>

(2)編寫JavaScript代碼,實現(xiàn)單擊按鈕,改變當前按鈕背景色效果,示例代碼如下。

< 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)然后設置當前的元素背景顏色
        this.style.backgroundColor = 'pink';
    }
 } 
< /script>

上述代碼中,第3行代碼獲取所有按鈕元素,存儲在btns偽數(shù)組中。第5~14行代碼使用for循環(huán)遍歷偽數(shù)組中的每一個元素btnslil。第6行代碼給每一個元素添加單擊事件。第8~10行代碼利用for循環(huán)首先把所有的按鈕背景顏色去掉,然后在第12行給當前的元素設置背景顏色為pink。預覽效果如圖所示。

1656669198540_排他思想.png

分享到:
在線咨詢 我要報名
和我們在線交談!