JS练习之隔行变色

最新推荐文章于 2024-04-14 08:44:26 发布

风中梦铃s

最新推荐文章于 2024-04-14 08:44:26 发布

阅读量233

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/m_S_L/article/details/85037132

JS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现CSS列表项颜色交替显示的方法。通过获取所有行数，并利用取余原理为偶数行的列表项添加背景颜色，同时实现了鼠标悬停效果。此技巧适用于网页设计中列表美化。

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

1、实现原理：获取所有行数，利用“取余”原理进行css颜色赋值

2、整体代码：

<script>
  window.onload = function (){
    var lis = document.getElementsByTagName("li");
    for( var i=0; i<lis.length; i++){
        if(i%2 == 0 ){
            lis[i].style.backgroundColor = "#eee";
        }

        lis[i].onmounseover = function (){
            this.className = "current";
        }
        
        lis[i].onmouseout = function(){
            this.className = "";
        }
        
    }
  }
</script>