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