HTML n☏种方法完成隔行掉色的实例编码

文中关键详细介绍了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.先后解析xml每个li,根据数据库索引除以3取余数,让当今的li有不一样的情况色
        //    2.第一种的方法,道别一个个的分辨,立即选用数字能量数组或是立即寻找相匹配的款式的方法来进行
        //    3.并不是解析xml每个li,只是解析xml每一组
        var oBox = document.getElementById('box');
        var ulList = oBox.getElementsByTagName('li');
        //*高亮度第三种方法:
        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 n种方法完成隔行掉色的实例编码的文章内容就详细介绍到这了,大量有关HTML隔行掉色內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!