隔行变色-CSDN博客

本文链接：https://blog.csdn.net/sunny_Destiny/article/details/104492808

隔行变色

今天我们来做一个好玩的东西：隔行变色。先来看一下效果图。

隔行变色

接下来我们看一下代码。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>隔行变色</title>
        <script>
            window.onload = function() {
                var aLi = document.getElementsByTagName('li');
                for(var i = 0; i < aLi.length; i++) {
                    //i 0 1 2 3 4 5...
                    if(i % 2 == 0) {
                        //2 4 6 8 ...
                        aLi[i].style.background = '#F9F8DB';
                    } else {
                        //1 3 5 7 9 ...
                        aLi[i].style.background = '#CFCBBC';
                    }
                }
            }
        </script>
    </head>

    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

分析代码很简单，获取所有的li元素，然后做判断，如果i%2等于0，那么这些数为一个颜色，其他为另一个颜色，就达到了我们想要的效果。
好了，今天的分享就到这里了。
愿你三冬暖,愿你春不寒; 愿你天黑有灯,下雨有伞。