隔行變色實現方法

時間 2019-11-09

標籤隔行變色實現方法简体版

原文原文鏈接

1、步驟分析

1.設計好表格頁面

首先在body裏面建立一個表格，並設置好格式，給他一個合適的大小, 以下：bash

li{
        width: 500px;
        height: 50px ;
        margin: 5px;
    }
 </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul> 
</body>
複製代碼

2.獲取要操做的 DOM 元素

var olis = document.querySelectorAll('li')
複製代碼

3.實現隔行變色每一行設置一個顏色

方法一

經過索引直接給每一行設置不一樣顏色學習

olis[0].style.background = 'blue'
    olis[1].style.background = 'red'
    olis[2].style.background = 'blue'
    olis[3].style.background = 'red'
    olis[4].style.background = 'blue'
    olis[5].style.background = 'red'
    olis[6].style.background = 'blue'
複製代碼

可是，這樣的方法若是要對更多的對象進行操做時，費時費力。this

方法二

經過for循環去實現spa

for (var i = 0; i < 7; i++) {
        console.log(i % 2)
        if (i % 2 == 0) {
            olis[i].style.background = 'blue'
        } else {
            olis[i].style.background = 'red'
        }
複製代碼

i%2==0 說明索引是 0 2 4 6，反之則是單數，而後再給他們分別設置對應的顏色，隔行變色獲得實現。設計

三元表達式寫法以下：code

olis[i].style.background = i%2==0 ? 'blue' : 'red';
        若 i%2爲0時 那就是個flase 這是 三元表達式的返回值 就是冒號後面的結果
        若 i%2爲1時 那就是個true  這是 三元表達式的返回值 就是問號後面的結果
        把三元的返回值 賦給前面的背景顏色
複製代碼

3. 鼠標事件

首先咱們須要把如今的顏色儲存起來，當鼠標移入時當前停留的元素變色，鼠標移除顏色恢復存儲時的效果。對象

olis[i].myBg =olis[i].style.background;
      // 存儲如今顏色
        olis[i].onmouseenter = function(){
            //鼠標進入
            //this 爲當前操做的那個元素
            this.style.background = 'gold'
        }
        olis[i].onmouseleave = function(){
            //鼠標離開顏色恢復存儲時的myBg
            this.style.background = this.myBg
        }
複製代碼

要想出現當鼠標點擊時，彈出彈框的效果，這時就須要咱們添加一個鼠標事件，具體以下：索引

olis[i].onclick = function(){
            alert(`這是第${this.myindex+1}行 背景色是${this.myBg}`)
        }
複製代碼

這樣一個完整的隔行變色事件便實現了，以上就是本文的所有內容，但願對你們的學習有所幫助。事件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。