BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

行間カラーチェンジを実現するHTML n方法 サンプルコード

2022-01-25 14:09:57

今回は、以下のように共有されている、インターレース・ラインのカラー・チェンジを実現するHTML n waysのサンプルコードを紹介します。

線と線の間の色を変更する方法 

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

        .bg1 {
            background-color: lightgreen;
        }

        .bg2 {
            background-color: lightskyblue;
        }
         #hover {
           background-color: red;
        }
        /* We put the hover after the bgn when the element class='bgo' to be dominated by the bgo style *        .hover {
           background-color: blueviolet;
        }
    </style>
</head>

<body>
    <ul class="box" id="box">
        <li>Last time everyone Chengdu you cdsvdvd vax v a insecticide water</li>
        <li>撒差多少VCD深V上次的深V但是是的深V的深V是DVD深V的深V是大Vsad深V是的v</li>
        <li>大SAV吃撒撒发顺丰</li>
        <li>Safin from deep V sprinkle VCDVD deep V is big V sprinkle big V big is hair big V is big V is da but what the </li>
        <li> sprinkle property taxes is what </li>
        <li> A deep V big SAV's in v </li>
        <li> Last time everyone Chengdu you cdsvdvd vax v a kill insect water </li>
        <! -- /*== Use css priority to get it done: default background color based on style class done, mouse-over style has a higher priority than the style class (ID
        selector/in-line style) -->
    </ul>
    <script>
        //=> highlight selected with color change every third line::modify class style class of element
            // style sheet: ID selector
            // Tag selector
            // Style class selector
            // in-line styles

            // There is a priority problem with these approaches: in-line, ID, style class, tag...
            
        // Options.
        // 1. Iterate through each li in turn, dividing the remainder by the index by 3, so that the current li has a different background color
        // 2. The first technique, say goodbye to the judgment of one by one, directly use the array or directly find the corresponding style to complete the way
        // 3. Instead of traversing each li, traverse each group
        var oBox = document.getElementById('box');
        var ulList = oBox.getElementsByTagName('li');
        //*Highlight the 3rd way.
        for (var i=0; i<ulList.length; i++){
                        ulList[i].className = 'bg' + (i%3); 
                        //=>mouseover: accumulate a hover style class on top of the original style class (since hover takes a back seat in the style class, its style will override the style in the original bg)
                        //=>mouseover: remove the new hover style class
                        ulList[i].onmouseover = function (){
                            this.className += 'hover'
                        }
                        ulList[i].onmouseout = function (){
                           // this.className = 'bg0 hover' - 'hover'; this is not a string subtraction, this is a mathematical operation that results in (NaN)
                            this.className = this.className.replace('hover','');
                        }
                    }
        //=>2.js first way
                // 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 current loop finds the 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 second way
                    // 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; // case 2: // ulList[i].className = "bgColorBlue";
                    // break;

                    // }
                    // }
            //=>4.js third way c
This article about HTML n way to achieve the color change between lines of sample code is introduced here, more related HTML color change between lines of content please search the script house previous articles or continue to browse the following related articles, I hope you support the script house more in the future!

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します