JS隔行变色

<!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>
JS隔行变色

推荐阅读
