dom_22 隔行变色

作者: basicGeek | 来源:发表于2018-11-23 09:43 被阅读0次

dom_22 隔行变色
隔行变色
隔行变色
隔行变色
隔行变色
js笔记十之for循环练习
webpack进阶【3】：webpack实现隔行变色
2015年Java方向C组第一题
【前端案例】07 - 表格隔行变色 + 全选和反选
表格隔行变色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            width: 1210px;
            margin: 100px auto;
        }
        li {
            height: 34px;
            cursor: pointer;
            font: 500 16px/34px "simsun";
        }
    </style>
</head>
<body>
    <ul>
        <li>北京股指  3063.31-22.18 (-0.72%)</li>
        <li>上海股指  3063.31-22.18 (-0.72%)</li>
        <li>广州股指  3063.31-22.18 (-0.72%)</li>
        <li>深圳股指  3063.31-22.18 (-0.72%)</li>
        <li>北京股指  3063.31-22.18 (-0.72%)</li>
        <li>上海股指  3063.31-22.18 (-0.72%)</li>
        <li>广州股指  3063.31-22.18 (-0.72%)</li>
        <li>深圳股指  3063.31-22.18 (-0.72%)</li>
    </ul>

    <script>
        //需求：利用childNodes实现各行变色
        //简单版
//        var arr = document.getElementsByTagName("li");
//        for(var i=0;i<arr.length;i++){
//            if(i%2===0){
//                arr[i].style.backgroundColor = "#ccc";
//            }
//        }
        //复杂版
        //获取ul
        var ul = document.getElementsByTagName("ul")[0];
        var arr = ul.childNodes;

        //把元素节点重新放入一个新数组
        var newArr = [];
        for(var i=0;i<arr.length;i++){
            if(arr[i].nodeType === 1){
                newArr.push(arr[i]);
            }
        }

        //隔行变色
        for(var i=0;i<newArr.length;i++){
            if(i%2!=0){
                newArr[i].style.backgroundColor = "red";
            }
        }
    </script>

</body>
</html>

隔行变色