三种颜色铺满十个li

最新推荐文章于 2023-02-09 17:53:07 发布

slash1993

最新推荐文章于 2023-02-09 17:53:07 发布

阅读量274

点赞数

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

本文链接：https://blog.csdn.net/slash1993/article/details/51245238

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>

slash1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种颜色铺满十个li

html>html lang="en">head> meta charset="UTF-8"> title>title> style> li{ margin: 0 auto; margin-bottom: 4px; height: 5em; list-styl
复制链接

扫一扫