今天分享的是用JS实现隔行变色，首先我们需要写出列表的样式，给列表设置好宽高，再设置好每一行列表的间隔。
css的代码
我们给列表设置了宽度为500px，高度为50px，每一行列表设置了5px的上下间隔。
<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元素。
var oLis = document.querySelectorAll('li');
设置一个变量为col，用来存储操作的某行原来的颜色。鼠标进入某行的时候给col赋值一个改变后的颜色。
var col = '';
第二步，实现隔行变色，给每一行设置一个颜色，我们需要进行for循环。
for (var i = 0; i < oLis.length; i++) {
oLis[i]代表每一个li。
oLis[i].style.background = i % 2 ? 'blue' : 'red';
这样，奇数行就变成了红色，偶数行就变成了蓝色。
然后再添加鼠标移上事件，当鼠标移上时，会改变原有的颜色。
oLis[i].onmouseenter = function () {
这里的'this'指的是当前操作的那个元素。
先把此行本身的颜色赋给col，然后再把此行的颜色改为金色。
col = this.style.background;
this.style.background = 'gold';
}
然后再添加鼠标移出事件，当鼠标移出时，又会由金色变为此行原有的颜色。
oLis[i].onmouseleave = function () {
this.style.background = col;
}
}
下图是隔行变色所呈现的效果。
