js隔行变色 - 爱码网

js隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js隔行变色</title>
    <style>
        span{
            margin: 5px;
        }
        li{
            height: 30px;
            line-height: 30px;
        }
        /*鼠标over的样式*/
        .current{
            background: red !important;
        }
    </style>
    <script>
        window.onload = function () {
            //改变每一个行的颜色
            var lit = document.getElementsByTagName("li");
            for(var i=0; i<lit.length; i++){
                //循环遍历出每一个li元素节点
                if(i%2 == 0){
                    lit[i].style.background = "#ccc";
                }else {
                    lit[i].style.background = "#ddd";
                }
                lit[i].onmouseover = function () {
                    this.className = "current";
                }
                lit[i].onmouseout = function () {
                    this.className = "";
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <ul>
            <li><span>上证指数</span><span>2000</span><span>2017-12</span><span>12%</span></li>
            <li><span>上证指数</span><span>2000</span><span>2017-12</span><span>12%</span></li>
            <li><span>上证指数</span><span>2000</span><span>2017-12</span><span>12%</span></li>
            <li><span>上证指数</span><span>2000</span><span>2017-12</span><span>12%</span></li>
            <li><span>上证指数</span><span>2000</span><span>2017-12</span><span>12%</span></li>
        </ul>
    </div>
</body>
</html>