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;
}
}
复制代码

下图是隔行变色所呈现的效果。

下图是鼠标移上所呈现的效果。

按照个人这种方法，快去试一试吧。