js 实现隔行变色

最新推荐文章于 2023-03-18 19:22:16 发布

巴依尔13

最新推荐文章于 2023-03-18 19:22:16 发布

阅读量1.2k

点赞数

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/wds207207/article/details/66585804

版权

前端开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色另一种方法</title>
    <style>
        li{
            height: 24px;
            margin-bottom: 3px;
            list-style: none;
        }
    </style>
    <script>
    window.onload = function (){
        var oUl = document.getElementById('list');
        var aLi = oUl.getElementsByTagName('li');
        var aColor = ['#f00', '#0f0', '#00f'];
        var oldColor = '';

        for(var i=0; i<aLi.length; i++){
            aLi[i].style.background = aColor[i%aColor.length];

            aLi[i].onmouseover = function (){
                oldColor = this.style.background;
                this.style.background = '#000';
            };
            aLi[i].onmouseout = function (){
                this.style.background = oldColor;
            };
        }
    };

    </script>
</head>
<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
        li{
            height: 24px;
            margin-bottom: 3px;
            list-style: none;
            background-color: 
        }
    </style>
    <script>
        window.onload = function (){
            var oUl = document.getElementById('list');
            var aLi = oUl.getElementsByTagName('li');
            var aColor = ['#f00', '#0f0', '#00f'];

            for(var i=0; i<aLi.length; i++){
                aLi[i].index = i;
                aLi[i].style.backgroundColor = aColor[i%aColor.length];

                aLi[i].onmouseover = function(){
                    this.style.backgroundColor = '#000';
                };

                aLi[i].onmouseout = function(){
                    this.style.backgroundColor = aColor[this.index%aColor.length];
                };
            }

        };
    </script>
</head>
<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>