HTML n种方式实现隔行变色的示例代码

站长资源 2025/10/25 佚名

2 0 1

黑松山资源网 Design By www.paidiu.com

本文主要介绍了HTML n种方式实现隔行变色的示例代码，分享给大家，具体如下：

n种方式实现隔行变色

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>n种方式实现隔行变色</title>
    <style>
        .box {
            margin: 20px auto;
            width: 300px;

        }

        .box li {
            line-height: 35px;
            border-bottom: 1px dashed #AAA;
            padding: 0 5px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
        }

        /* 1.css3第一种方式 */
        /* .box li:nth-of-type(3n+1){
            background-color: green;
        }
        .box li:nth-of-type(3n+2){
            background-color: red;
        }
        .box li:nth-of-type(3n){
            background-color: blue;
        } */
        /* //=> bgColor与ulList组合2种方式实现 */
        /* .bgColorYellow {
            background-color: yellow;
        }
        .bgColorRed {
            background-color: red;
        }
        .bgColorBlue {
            background-color: blue;
        }  */
        /* //=> bgColor与ulList组合1种方式实现 */
        .bg0 {
            background-color: lightcoral;
        }

        .bg1 {
            background-color: lightgreen;
        }

        .bg2 {
            background-color: lightskyblue;
        }
         #hover {
           background-color: red;
        }
        /* 我们把hover放在bgn的后面，当元素的class=‘bgo’以bgo样式为主 */
        .hover {
           background-color: blueviolet;
        }
    </style>
</head>

<body>
    <ul class="box" id="box">
        <li>上次大家成都你cdsvdvd vax v a 杀虫水</li>
        <li>撒差多少VCD深V上次的深V但是是的深V的深V是DVD深V的深V的深V是大Vsad深V是的v</li>
        <li>大SAV吃撒撒发顺丰</li>
        <li>萨芬从深V撒VCDVD深V是大V撒大V大是发大V是大V是哒但是啥的 </li>
        <li>撒房产税才是</li>
        <li>阿深V大SAV的在v</li>
        <li>上次大家成都你cdsvdvd vax v a 杀虫水</li>
        <!-- /*==利用css优先级搞定：默认背景颜色基于样式类完成，鼠标滑过的样式比样式类优先级高一些（ID
        选择器/行内样式） -->
    </ul>
    <script>
        //=>隔三行变色高亮选中：:修改元素的class样式类
            // 样式表: ID选择器
            //        标签选择题
            //        样式类选择器
            //        行内样式

            //        这些方式存在优先级的问题:行内，ID，样式类，标签...
            
        // 方案：
        //    1.依次遍历每一个li，通过索引除以3取余数，让当前的li有不同的背景色
        //    2.第一种的技巧，告别一个个的判断，直接采用数组或者直接找到对应的样式的方式来完成
        //    3.不是遍历每一个li，而是遍历每一组
        var oBox = document.getElementById('box');
        var ulList = oBox.getElementsByTagName('li');
        //*高亮第3种方式：
        for (var i=0; i<ulList.length; i++){
                        ulList[i].className = 'bg'+ (i%3); 
                        //=>鼠标滑过：在原有样式类基础上累加一个hover样式类（由于hover在样式类中靠后，它的样式会覆盖原有的bg中的样式）
                        //=>鼠标离开：把新增的hover样式类移除掉即可
                        ulList[i].onmouseover = function (){
                            this.className += 'hover'
                        }
                        ulList[i].onmouseout = function (){
                           // this.className = 'bg0 hover'- 'hover';这不是字符串相减，这是数学运算结果是（NaN）
                            this.className = this.className.replace('hover','');
                        }
                    }
        //=>2.js第一种方式
                // for (var i = 0; i < ulList.length; i++) { 
                //     //=> 分析：i=0 第一个li i%3=0
                //     //=> i=1 第一个li i%3=1
                //     //=>  i=2 第一个li i%3=2
                //     //=>  i=3 第一个li i%3=0
                //     var n=i%3; //当前循环找出来的那个li
                //     liColor=ulList[i];
                    // if(n===0){
                    //     liColor.style.backgroundColor='red';
                    // }else if(n===1){
                    //     liColor.style.backgroundColor='yellow';
                    // }else {
                    //     liColor.style.backgroundColor='pink';
                    // }
                    // }

            //=>3.js第二种方式
                    //  for (var i=0; i<ulList.length; i++){
                    //      switch ( i % 3) {
                    //           case 0:
                    //            ulList[i].className = "bgColorYellow";
                    //            break;
                    //            case 1:
                    //            ulList[i].className = "bgColorRed";
                    //            break;
                    //            case 2:
                    //            ulList[i].className = "bgColorBlue";
                    //            break;

                    //      }
                    //  }
            //=>4.js第三种方式  colorArray+bgColorYellow...
               //  var colorArray = ["bgColorYellow","bgColorRed", "bgColorBlue"];
               // for (var i=0; i<ulList.length; i++){
                     //=> 分析： i%3=0 "bgColorYellow" colorArray[0]
                     //=>        i%3=1  "bgColorBlue"  colorArray[1]
                     //=>        i%3=2  "bgColorRed"   colorArray[2]
                     //=> i%3的余数是多少？就是我们当前需要到数组中通过此索引找到的样式类，而这个样式类则是当前li需要设置的class
                   //       ulList[i].className = colorArray[i % 3];
                          
                 //   }
            //=>5.js第四种方式 
                    // for (var i=0; i<ulList.length; i++){
                    //     ulList[i].className = 'bg'+ (i%3); //=>隔三行变色修改样式类
                    //     //=>在改变之前把原有的样式类信息存储到自定义属性中
                    //     ulList[i].myOldClass= ulList[i].className;

                    //     ulList[i].onmouseover = function () {
                    //         // 高亮选中：
                    //         //this:当前操作的元素
                    //         //=>第一种方法
                    //                 //  this.style.background = 'yellow';
                    //          //=>第二种方法
                    //                 // this.id = 'hover';
                    //         //=>第三种方法
                    //           //=>设置新样式之前把原有的样式保存起来,this:当前操作的元素也是一个元素对象，有很多内置属性，我们设置一个自定义属性，把原有的样式类信息存储进来

                    //           console.dir(this);
                               
                    //                //=>滑过，简单粗暴的让class等于hover
                    //                  this.className = 'hover';
                    //             }
                    //             ulList[i].onmouseout = function() {
                    //                // this.style.background = '';
                    //                //    this.id = '';
                    //                //=>离开：让其还原为原有的样式（原有的样式可能是bg0,bg1,bg2）
                    //                this.className=this.myOldClass;

                    //             }
                    // }
           //=>6.js第五种方式三元运算符三种写法  
                     //=>第一种写法
                        // function changeColor() {
                        //     for (var i = 0 ; i< ulList.length; i++){
                        //         ulList[i].style.backgroundColor = i % 3 == 0 ? 'lightblue': ((i%3 ==1)?'lightgreen':'lightpink');
                        //     }
                        // }
                        // changeColor();
                     //=>第二种写法
                        // for (var i = 0; i < ulList.length; i++) {
                        //     var n = i % 3;
                        //     liColor = ulList[i];
                        //        //=>以下两种都可以
                        //             // n === 0 ? liColor.style.backgroundColor = 'red' : (n === 1 ? liColor.style.backgroundColor = 'yellow' :
                        //           //     liColor.style.backgroundColor = 'pink')
                        //=>第三种写法
                        //     n === 0 ? liColor.style.backgroundColor='red': n === 1 ?liColor.style.backgroundColor='yellow' : liColor.style.backgroundColor='blue';
                        // }
             //=>7.js第六种方式
                 //=>我们每一组循环一次，在循环体中，我们把当前这一组样式都设置好即可（可能出现当前这一组不够3个，就报错了）
                    // var max = ulList.length - 1;
                    // for (var i=0;i<ulList.length;i+=3){
                    //     ulList[i].style.background='bg0';
                    //     i + 1 <= max ? ulList[i+1].style.background='bg1':null; 
                    //     i + 2 <= max ? ulList[i+2].style.background='bg2':null;
                    // }
    </script>
</body>

</html>

运行效果如下：

HTML,隔行变色

黑松山资源网 Design By www.paidiu.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

黑松山资源网 Design By www.paidiu.com

评论“HTML n种方式实现隔行变色的示例代码”

暂无评论...

www.paidiu.com 黑松山资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

HTML n种方式实现隔行变色的示例代码

Table自适应以及溢出的一些设置详解

HTML页面自适应宽度的table(表格)

评论“HTML n种方式实现隔行变色的示例代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

HTML n种方式实现隔行变色的示例代码

Table自适应以及溢出的一些设置详解

HTML页面自适应宽度的table(表格)

评论“HTML n种方式实现隔行变色的示例代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存