三种颜色铺满十个li

最新推荐文章于 2023-07-12 17:03:49 发布

slash1993

最新推荐文章于 2023-07-12 17:03:49 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：闭包

本文链接：https://blog.youkuaiyun.com/slash1993/article/details/51245238

javascript 专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        li{
            margin: 0 auto;
            margin-bottom: 4px;
            height: 5em;
            list-style: none;
            width: 60%;
        }
    </style>
</head>
<body>
    <script>
        window.onload = function(){

            var oUl = document.getElementById("ul1");
            var ali = oUl.getElementsByTagName("li");
            arr = ['red','blue','yellow'];

                for(var i = 0;i< ali.length; i++ ){

                    ali[i].style.background = arr[i%arr.length];
                    ali[i].index = i;
                    ali[i].onmouseover = function(){
                        this.style.background = 'gray';
                    }
                    ali[i].onmouseout = function(){
                        this.style.background = arr[this.index%arr.length];
                    }
                }
        }

    </script>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
 </ul></body></html>