孙肖宁

javascript实现隔行换色
描述:使得列表发生隔行换色实现方法:把所有的行封装在一个数组里,进行遍历,对数组中的每一个元素进行判断,偶数个的%...
扫描右侧二维码阅读全文
30
2018/03

javascript实现隔行换色

描述:使得列表发生隔行换色
实现方法:把所有的行封装在一个数组里,进行遍历,对数组中的每一个元素进行判断,偶数个的%2就会等于0;这样就可以对偶数行或者奇数行进行背景色的控制了。
实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
        ul{
            text-align: center;
            list-style: none;
            width: 500px;
            margin: 0 auto;
        }
        li{
            height: 30px;
            cursor:pointer;
            font:700 16px/30px "华文中宋";
        }
    </style>
</head>
<body>
    <ul>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
    </ul>
</body>
</html>
<script>
    //方法1
   /* var arr = document.getElementsByTagName("li");
    for (var i = 0;i<arr.length;i++){
        if(i%2===0){
            arr[i].style.background="#64ffd8";
        }
    }*/
   //方法2
    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.background = "#64ffd8";
        }
    }
</script>
Last modification:March 30th, 2018 at 08:36 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment