JavaScript实现li隔行变色

最新推荐文章于 2021-05-31 02:43:18 发布

转载最新推荐文章于 2021-05-31 02:43:18 发布 · 229 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript为HTML列表项自动设置奇数偶数背景颜色的方法。通过简单的代码逻辑，实现了列表中每一项根据其位置自动获得不同背景色的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <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 6....
                if(i%2==0)
                {
                    //0 2 4 6 8 10
                    aLi[i].style.background='#CCC';
                }
                else
                {
                    //1 3 5 7 9
                    aLi[i].style.background='';
                }
            }
        };
    </script>
</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>