JS實現隔行變色

時間 2019-11-24

原文原文鏈接

今天分享的是用JS實現隔行變色，首先咱們須要寫出列表的樣式，給列表設置好寬高，再設置好每一行列表的間隔。css

css的代碼

咱們給列表設置了寬度爲500px，高度爲50px，每一行列表設置了5px的上下間隔。bash

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

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
複製代碼

JS的代碼

第一步，獲取要操做的DOM元素。this

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

設置一個變量爲col，用來存儲操做的某行原來的顏色。鼠標進入某行的時候給col賦值一個改變後的顏色。spa

var col = '';
複製代碼

第二步，實現隔行變色，給每一行設置一個顏色，咱們須要進行for循環。3d

for (var i = 0; i < oLis.length; i++) {
複製代碼

oLis[i]表明每個li。code

oLis[i].style.background = i % 2 ? 'blue' : 'red';
複製代碼

這樣，奇數行就變成了紅色，偶數行就變成了藍色。cdn

而後再添加鼠標移上事件，當鼠標移上時，會改變原有的顏色。blog

oLis[i].onmouseenter = function () {
複製代碼

這裏的'this'指的是當前操做的那個元素。事件

先把此行自己的顏色賦給col，而後再把此行的顏色改成金色。string

col = this.style.background;
複製代碼

this.style.background = 'gold';
}
複製代碼

而後再添加鼠標移出事件，當鼠標移出時，又會由金色變爲此行原有的顏色。

oLis[i].onmouseleave = function () {
複製代碼

this.style.background = col;
}
}
複製代碼

下圖是隔行變色所呈現的效果。

下圖是鼠標移上所呈現的效果。

按照個人這種方法，快去試一試吧。

相關標籤/搜索

每日一句

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