JS隔行变色

CSS样式：

*{ 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;}

HTML部分：

<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>

JS部分：

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;
			}
		}
	};

预览效果：