隔行换色案例-一一网

基于css实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行换色之Css实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        .box{
            width: 300px;
            box-sizing: border-box;
            margin: 20px auto;
        }
        .box li{
            line-height: 50px;
            border-bottom:1px dashed lightcoral;
        }
         /* 
            Css实现奇偶行变色，鼠标滑过高亮
         */
        .box li:nth-child(even){
            background-color: lightpink;
        }
        .box li:hover{
            background-color:lightskyblue;
        }
    </style>
</head>
<body>
    <ul class="box" id="box">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
        <li>第五行</li>
    </ul>
</body>
</html>
复制代码

基于js实现

内存你中的运转.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行换色之Css实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .box {
            width: 300px;
            box-sizing: border-box;
            margin: 20px auto;
        }

        .box li {
            line-height: 50px;
            border-bottom: 1px dashed lightcoral;
        }
    </style>
</head>

<body>
    <ul class="box" id="box">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
        <li>第五行</li>
    </ul>
</body>
<script>
    /* 
    1.想操作谁就先获取谁
        boxlist是一个元素集合 类数组集合
        0：第一个li 元素
        1：第二个li 元素对象
        ...
        length：5
     2.循环给每一个li设置颜色[奇偶行处理]
    
    */
    var box = document.getElementById('box');
    var boxlist = box.getElementsByTagName('li')
    for (var i = 0; i < boxlist.length; i++) {
        //i 集合中的某个索引
        //boxlist[i] 当前这一轮循环，获取的集合中这一项
        // 分析：
        // i=0  第一轮  boxList[0]第一个LI  奇
        // i=1  第二轮  boxList[1]第二个LI  偶
        // i=2  第三轮  boxList[2]第三个LI  奇
        // i=3  第四轮  boxList[3]第四个LI  偶
        // 奇数行的索引都是偶数 偶数行的索引都是奇数
        boxlist[i].myindex = i;
        //每一轮循环，都给每一个li对象设置一个自定义属性myIndex,存储自己的索引
        boxlist[i].style.background = i % 2 === 0 ? "#FFF" : "#DDD";
        boxlist[i].onmouseover = function () {
            //this：这个，触发哪一个li对象的事件，THIS就是哪一个LI对象
            this.style.background = 'pink';
        };

        boxlist[i].onmouseout = function () {
            var index = this.myindex;//获取当前操作这个Li的索引
            boxlist[index].style.background = index % 2 === 0 ? "#FFF" : "#DDD";
        };
    }
</script>
</html>
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端