JS实现li各行变色，且在各行变色基础上实现鼠标移入变色，移除变为原来的颜色

本文链接：https://blog.csdn.net/weixin_45353679/article/details/104332753

本文介绍使用JavaScript实现列表项隔行变色的方法，并在此基础上增加鼠标悬停时改变当前列表项颜色的效果，当鼠标离开时恢复原色。通过简单的代码示例，展示了如何操作DOM元素和事件监听，适用于网页前端开发人员学习和参考。

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

1、JS实现隔行变色

<body>
    <ul>
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
        <li>ddddddd</li>
        <li>eeeeeee</li>
    </ul>
    <script>
         // 找到所有li 根据标签名找
        var lis = document.getElementsByTagName('li');
        for(var i=0; i<lis.length; i++) {
            if(i%2 === 0) {
                lis[i].style.backgroundColor = 'red';
            } else {
                lis[i].style.backgroundColor = 'green';
            }
        }

    </script>
</body>

2、鼠标放入li 当前li背景色变红离开去除颜色

<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>55555</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        for (let i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.style.backgroundColor = 'red';
            }
            lis[i].onmouseout = function() {
                this.style.backgroundColor = 'white';
            }
        }
    </script>
</body>

3、在隔行变色基础上鼠标移入某一个li当前元素变红色离开恢复之前的颜色

<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>55555</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        for (let i = 0; i < lis.length; i++) {
            if (i % 2 === 0) {
                lis[i].style.backgroundColor = 'green';
            } else {
                lis[i].style.backgroundColor = 'yellow';
            }
            lis[i].onmouseover = function() {
                this.style.backgroundColor = 'red';
            }
            lis[i].onmouseout = function() {
                if (i % 2 === 0) {
                    lis[i].style.backgroundColor = 'green';
                } else {
                    lis[i].style.backgroundColor = 'yellow';
                }
            }
        }
    </script>
</body>