隔行换色

作者: 垃圾桶边的狗 | 来源:发表于2019-03-31 19:29 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .li_red{
                width: 400px;
                background: red;
            }
            .li_blue{
                width: 400px;
                background: blue;
            }
        </style>
        <script type="text/javascript">
            onload = function(){
                //定义循环的次数（生成li数量）
                var row_num = 9;
                //拿到我们ul元素
                var my_ul = document.getElementsByTagName("ul")[0];
                //循环创建，并且添加对应的文本内容，根据我们的i来赋值我们class
                for(var i=0;i<row_num;i++){
                    //创建li
                    var my_li = document.createElement("li");
                    //加内容
                    my_li.innerText = i+1;
                    //如果i是偶数给红色的样式（li_red）否则设置样式（li_blue）
                    if(i%2==0){
                        my_li.className = "li_red";
                    } else {
                        my_li.className = "li_blue";
                    }
                    //将创建的元素加入到我们的ul
                    my_ul.appendChild(my_li);
                }
            }
            
        </script>
    </head>
    <body>
        <ul>
        </ul>
    </body>
</html>