dom03隔行变色

最新推荐文章于 2024-02-15 09:51:38 发布

JunXian9102

最新推荐文章于 2024-02-15 09:51:38 发布

阅读量253

点赞数

本文链接：https://blog.csdn.net/smiple9102/article/details/62043769

版权

js-dom基础课堂笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

隔行变色效果1

<style>
    .even{
        background-color: #999;
    }
    .odd{
        background-color: #ccc;
    }
</style>
<body>  
    <ul id="list">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</div>
<script>
    var ul=document.getElementById('list');
    var lis=ul.getElementsByTagName('li');
    for (var i = 0;i <=lis.length;  i++) {
        if (i%2===0) {//索引号为偶数页面中的行数为奇数行
            lis[i].className="odd";
        }else{
            lis[i].className="even";
        };
    };
</script>