主頁 > 知識庫 > HTML n種方式實現(xiàn)隔行變色的示例代碼

HTML n種方式實現(xiàn)隔行變色的示例代碼

熱門標簽:長春極信防封電銷卡公司 智能電銷機器人廣告語 貴陽ai外呼系統(tǒng) crm外呼系統(tǒng)好不好 愛巢地圖標注 電話機器人批發(fā) 電銷外呼線路改不外呼線路 重慶人工智能電銷機器人報價 強訊外呼系統(tǒng)

本文主要介紹了HTML n種方式實現(xiàn)隔行變色的示例代碼,分享給大家,具體如下:

n種方式實現(xià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種方式實現(xià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種方式實現(xiàn) */
        /* .bgColorYellow {
            background-color: yellow;
        }
        .bgColorRed {
            background-color: red;
        }
        .bgColorBlue {
            background-color: blue;
        }  */
        /* //=> bgColor與ulList組合1種方式實現(xiàn) */
        .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吃撒撒發(fā)順豐</li>
        <li>薩芬從深V撒VCDVD深V是大V撒大V大是發(fā)大V是大V是噠但是啥的 </li>
        <li>撒房產(chǎn)稅才是</li>
        <li>阿深V大SAV的在v</li>
        <li>上次大家成都你cdsvdvd vax v a 殺蟲水</li>
        <!-- /*==利用css優(yōu)先級搞定:默認背景顏色基于樣式類完成,鼠標滑過的樣式比樣式類優(yōu)先級高一些(ID
        選擇器/行內(nèi)樣式) -->
    </ul>
    <script>
        //=>隔三行變色高亮選中::修改元素的class樣式類
            // 樣式表: ID選擇器
            //        標簽選擇題
            //        樣式類選擇器
            //        行內(nèi)樣式

            //        這些方式存在優(yōu)先級的問題:行內(nèi),ID,樣式類,標簽...
            
        // 方案:
        //    1.依次遍歷每一個li,通過索引除以3取余數(shù),讓當前的li有不同的背景色
        //    2.第一種的技巧,告別一個個的判斷,直接采用數(shù)組或者直接找到對應的樣式的方式來完成
        //    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';這不是字符串相減,這是數(shù)學運算結(jié)果是(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; //當前循環(huán)找出來的那個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的余數(shù)是多少?就是我們當前需要到數(shù)組中通過此索引找到的樣式類,而這個樣式類則是當前l(fā)i需要設置的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:當前操作的元素也是一個元素對象,有很多內(nèi)置屬性,我們設置一個自定義屬性,把原有的樣式類信息存儲進來

                    //           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第六種方式
                 //=>我們每一組循環(huán)一次,在循環(huán)體中,我們把當前這一組樣式都設置好即可(可能出現(xiàn)當前這一組不夠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種方式實現(xiàn)隔行變色的示例代碼的文章就介紹到這了,更多相關HTML隔行變色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

標簽:保定 上海 廣安 內(nèi)蒙古 陜西 吳忠 清遠 山南

巨人網(wǎng)絡通訊聲明:本文標題《HTML n種方式實現(xiàn)隔行變色的示例代碼》,本文關鍵詞  HTML,種,方式,實現(xiàn),隔行,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權(quán)與本站無關。
  • 相關文章
  • 下面列出與本文章《HTML n種方式實現(xiàn)隔行變色的示例代碼》相關的同類信息!
  • 本頁收集關于HTML n種方式實現(xiàn)隔行變色的示例代碼的相關信息資訊供網(wǎng)民參考!
  • 推薦文章