<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS隔行变色</title>
<style>
*{ padding: 0; margin: 0;}
ul{ list-style: none;}
body{ color: #333; font-size: 14px; font-family: "Microsoft Yahei"; background: #fff;}
#box li{ padding: 10px; border-bottom: 1px solid #eee; -webkit-box-sizing: border-box; box-sizing: border-box;}
#box li.hover{ background: #F6FBFF!important;}
</style>
</head>
<body>
<div id="box">
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
<li>无序列表5</li>
<li>无序列表6</li>
<li>无序列表7</li>
<li>无序列表8</li>
<li>无序列表9</li>
<li>无序列表10</li>
</ul>
</div>
<script>
window.onload = function(){
var oDiv = document.getElementById('box');
var aLi = document.getElementsByTagName('li');
var that = null;
for(var i = 0; i < aLi.length; i++){
// 隔行变色(取模%)
/*if(i%2 == 0){
aLi[i].style.background = '#f9f9f9';
}else{
aLi[i].style.background = '';
}*/
// 或者用三目运算
i%2 == 0 ? aLi[i].style.background = '#f9f9f9' : aLi[i].style.background = '';
// 方法一：鼠标经过，清空所有，当前高亮
/*aLi[i].onmouseover = function(){
for(var i = 0; i < aLi.length; i++){
aLi[i].className = '';
}
this.className = 'hover';
};*/
// 方法二：利用that变量缓存当前的class
aLi[i].onmouseover = function(){
that = this.className;
this.className = 'hover';
};
aLi[i].onmouseout = function(){
this.className = that;
}
}
};
</script>
</body>
</html>
