HTML n ways to achieve alternate color code sample code

This article mainly introduces the sample code of HTML n ways to achieve alternate color change, and shares it with you, as follows:

n ways to achieve interlaced color change

<!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 ways to achieve interlaced color change</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 first method*/
        /* .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 and ulList are combined in 2 ways*/
        /* .bgColorYellow {
            background-color: yellow;
        }
        .bgColorRed {
            background-color: red;
        }
        .bgColorBlue {
            background-color: blue;
        } */
        /* //=> bgColor and ulList are combined in 1 way*/
        .bg0 {
            background-color: lightcoral;
        }

        .bg1 {
            background-color: lightgreen;
        }

        .bg2 {
            background-color: lightskyblue;
        }
         #hover {
           background-color: red;
        }
        /* We put hover after bgn, when the element's class='bgo' is mainly based on the bgo style*/
        .hover {
           background-color: blueviolet;
        }
    </style>
</head>

<body>
    <ul class="box" id="box">
        <li>Last time we went to Chengdu, you had CDs, DVDs, VAx, VA insecticide</li>
        <li>How much is the difference between the VCD deep V and the last deep V, but it is the deep V of the deep V of the DVD deep V of the deep V is the big Vsad deep V is v</li>
        <li>Big SAV eats and sends SF Express</li>
        <li>Safin from deep V Sa VCDVD deep V is big V Sa big V big is hair big V is big V is da but what</li>
        <li>Property tax is the way to go</li>
        <li>A deep V big SAV in v</li>
        <li>Last time we went to Chengdu, you had CDs, DVDs, VAx, VA insecticide</li>
        <!-- /*==Use CSS priority to solve: the default background color is based on the style class, and the style that the mouse moves over has a higher priority than the style class (ID
        Selector/inline style) -->
    </ul>
    <script>
        //=>Change color every three lines to highlight the selected element::Modify the class style class of the element//Style sheet: ID selector//Tag selection question//Style class selector//Inline style//These methods have priority issues: inline, ID, style class, tag...
            
        // plan:
        // 1. Traverse each li in turn, divide the index by 3 and take the remainder to make the current li have a different background color // 2. The first technique, say goodbye to one-by-one judgment, and directly use an array or directly find the corresponding style to complete // 3. Instead of traversing each li, traverse each group var oBox = document.getElementById('box');
        var ulList = oBox.getElementsByTagName('li');
        //*Highlight the third method:
        for (var i=0; i<ulList.length; i++){
                        ulList[i].className = 'bg'+ (i%3); 
                        //=>Mouse over: add a hover style class based on the original style class (since hover is at the end of the style class, its style will overwrite the original style in bg)
                        //=>Mouse leaves: remove the newly added hover style class ulList[i].onmouseover = function (){
                            this.className += 'hover'
                        }
                        ulList[i].onmouseout = function (){
                           // this.className = 'bg0 hover'- 'hover'; This is not string subtraction, this is a mathematical operation result (NaN)
                            this.className = this.className.replace('hover','');
                        }
                    }
        //=>2.jsThe first method// for (var i = 0; i < ulList.length; i++) { 
                // //=> Analysis: i=0 first li i%3=0
                // //=> i=1 first li i%3=1
                // //=> i=2 first li i%3=2
                // //=> i=3 first li i%3=0
                // var n=i%3; //The li found in the current loop
                // 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 The second method // 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 The third method colorArray+bgColorYellow...
               // var colorArray = ["bgColorYellow","bgColorRed","bgColorBlue"];
               // for (var i=0; i<ulList.length; i++){
                     //=> Analysis: i%3=0 "bgColorYellow" colorArray[0]
                     //=> i%3=1 "bgColorBlue" colorArray[1]
                     //=> i%3=2 "bgColorRed" colorArray[2]
                     //=> What is the remainder of i%3? This is the style class we currently need to find in the array through this index, and this style class is the class that the current li needs to set
                   // ulList[i].className = colorArray[i % 3];
                          
                 // }
            //=>5.jsThe fourth method// for (var i=0; i<ulList.length; i++){
                    // ulList[i].className = 'bg'+ (i%3); //=>Change the color of every three lines to modify the style class// //=>Store the original style class information in the custom attribute before changing it// ulList[i].myOldClass= ulList[i].className;

                    // ulList[i].onmouseover = function () {
                    // // Highlight selection:
                    // //this: the element currently being operated// //=>First method// // this.style.background = 'yellow';
                    // //=>Second method// // this.id = 'hover';
                    // //=>The third method// //=>Save the original style before setting the new style, this: The element currently being operated is also an element object with many built-in attributes. We set a custom attribute to store the original style class information. // console.dir(this);
                               
                    // //=>Slide over, simply and roughly make class equal to hover
                    // this.className = 'hover';
                    // }
                    // ulList[i].onmouseout = function() {
                    // // this.style.background = '';
                    // // this.id = '';
                    // //=>Leave: restore it to the original style (the original style may be bg0, bg1, bg2)
                    // this.className=this.myOldClass;

                    // }
                    // }
           //=>6.js The fifth way of writing the ternary operator in three ways //=>The first way of writing // function changeColor() {
                        // for (var i = 0 ; i< ulList.length; i++){
                        // ulList[i].style.backgroundColor = i % 3 == 0 ? 'lightblue': ((i%3 ==1)?'lightgreen':'lightpink');
                        // }
                        // }
                        //changeColor();
                     //=>The second way of writing// for (var i = 0; i < ulList.length; i++) {
                        // var n = i % 3;
                        // liColor = ulList[i];
                        // //=>Both of the following are acceptable// // n === 0 ? liColor.style.backgroundColor = 'red' : (n === 1 ? liColor.style.backgroundColor = 'yellow' :
                        // // liColor.style.backgroundColor = 'pink')
                        //=>The third way of writing// n === 0 ? liColor.style.backgroundColor='red': n === 1 ?liColor.style.backgroundColor='yellow' : liColor.style.backgroundColor='blue';
                        // }
             //=>7.js The sixth method//=> We loop each group once, and in the loop body, we just set the styles of the current group (it may appear that the current group is less than 3, and an error will be reported)
                    // 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>

The operation effect is as follows:

This concludes this article about sample codes for implementing alternate line color change in HTML. For more information on alternate line color change in HTML, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: How to use vue-video-player to achieve live broadcast

>>: Detailed explanation of the process of installing MySQL on Ubuntu 18.04.4