HTML 代替カラーコードを実現する n 通りの方法サンプルコード

この記事では、主に HTML のサンプルコードを紹介し、次のように交互に色を変更する方法を共有します。

インターレースカラー変更を実現するn通りの方法

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

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>インターレースカラー変更を実現する n 通りの方法</title>
    <スタイル>
        。箱 {
            マージン: 20px 自動;
            幅: 300ピクセル;

        }

        .box li {
            行の高さ: 35px;
            border-bottom: 1px 破線 #AAA;
            パディング: 0 5px;
            テキストオーバーフロー: 省略記号;
            空白: ラップなし;
            オーバーフロー: 非表示;
            カーソル: ポインタ;
        }

        /* 1.css3 最初のメソッド*/
        /* .box li:n番目の型(3n+1){
            背景色: 緑;
        }
        .box li:n番目の型(3n+2){
            背景色: 赤;
        }
        .box li:n番目の型(3n){
            背景色: 青;
        } */
        /* //=> bgColor と ulList は 2 つの方法で結合されます*/
        /* .bgColorYellow {
            背景色: 黄色;
        }
        .bgColorRed{
            背景色: 赤;
        }
        .bgColorBlue{
            背景色: 青;
        } */
        /* //=> bgColor と ulList は 1 つの方法で結合されます*/
        .bg0 {
            背景色: ライトコーラル;
        }

        .bg1 {
            背景色: 薄緑;
        }

        .bg2 {
            背景色: ライトスカイブルー;
        }
         #ホバー{
           背景色: 赤;
        }
        /* 要素の class='bgo' が主に bgo スタイルに基づいている場合は、bgn の後に hover を配置します */
        .hover {
           背景色: 青紫;
        }
    </スタイル>
</head>

<本文>
    <ul class="box" id="box">
        <li>前回成都に行ったとき、CD、DVD、VAx、VA殺虫剤がありました</li>
        <li>VCDのディープVと前回のディープVの違いはどれくらいですが、DVDのディープVのディープVのディープVは大きなVsadディープVですv</li>
        <li>Big SAV が 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>固定資産税こそが正しい道です</li>
        <li>v の深い V の大きな SAV</li>
        <li>前回成都に行ったとき、CD、DVD、VAx、VA殺虫剤がありました</li>
        <!-- /*==CSS の優先順位を使用して解決します。デフォルトの背景色はスタイル クラスに基づいており、マウスが移動するスタイルはスタイル クラス (ID) よりも優先順位が高くなります。
        セレクター/インラインスタイル) -->
    </ul>
    <スクリプト>
        //=> 3 行ごとに色を変更して、選択した要素を強調表示します::要素のクラス スタイル クラスを変更します//スタイル シート: ID セレクター//タグ選択の質問//スタイル クラス セレクター//インライン スタイル//これらのメソッドには優先順位の問題があります: インライン、ID、スタイル クラス、タグ...
            
        // プラン：
        // 1. 各 li を順番に走査し、インデックスを 3 で割って余りを取って、現在の li に異なる背景色を設定します。 // 2. 最初の手法では、1 つずつ判断するのではなく、配列を直接使用するか、対応するスタイルを直接見つけて完了します。 // 3. 各 li を走査する代わりに、各グループを走査します。 var oBox = document.getElementById('box');
        var ulList = oBox.getElementsByTagName('li');
        //*3番目のメソッドを強調表示します。
        (var i=0; i<ulList.length; i++){
                        ulList[i].className = 'bg'+ (i%3); 
                        //=>マウスオーバー: 元のスタイル クラスに基づいてホバー スタイル クラスを追加します (ホバーはスタイル クラスの最後にあるため、そのスタイルは背景の元のスタイルを上書きします)
                        //=>マウスが離れる: 新しく追加されたホバースタイルクラスを削除します ulList[i].onmouseover = function (){
                            this.className += 'hover'
                        }
                        ulList[i].onmouseout = 関数 (){
                           // 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='赤';
                    // }そうでない場合(n===1){
                    // liColor.style.backgroundColor='黄色';
                    // }それ以外 {
                    // liColor.style.backgroundColor='ピンク';
                    // }
                    // }

            //=>3.js 2番目のメソッド // for (var i=0; i<ulList.length; i++){
                    // スイッチ ( i % 3) {
                    // ケース 0:
                    // ulList[i].className = "bgColorYellow";
                    // 壊す;
                    // ケース 1:
                    // ulList[i].className = "bgColorRed";
                    // 壊す;
                    // ケース 2:
                    // ulList[i].className = "bgColorBlue";
                    // 壊す;

                    // }
                    // }
            //=>4.js 3 番目のメソッド colorArray+bgColorYellow...
               // var colorArray = ["bgColorYellow","bgColorRed","bgColorBlue"];
               // (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が設定する必要のあるクラスです。
                   // ulList[i].className = colorArray[i % 3];
                          
                 // }
            //=>5.js4番目のメソッド// for (var i=0; i<ulList.length; i++){
                    // ulList[i].className = 'bg'+ (i%3); //=> スタイル クラスを変更するには、3 行ごとに色を変更します// //=> 変更する前に、元のスタイル クラス情報をカスタム属性に保存します// ulList[i].myOldClass= ulList[i].className;

                    // ulList[i].onmouseover = 関数 () {
                    // // 選択範囲を強調表示:
                    // //this: 現在操作されている要素// //=>最初のメソッド// // this.style.background = 'yellow';
                    // //=>2 番目の方法// // this.id = 'hover';
                    // //=>3 番目の方法// //=>新しいスタイルを設定する前に元のスタイルを保存します。this: 現在操作されている要素も、多くの組み込み属性を持つ要素オブジェクトです。元のスタイル クラス情報を格納するためのカスタム属性を設定します。// console.dir(this);
                               
                    // //=>スライドオーバーして、単純にクラスをホバーと同じにします
                    // this.className = 'hover';
                    // }
                    // ulList[i].onmouseout = 関数() {
                    // // this.style.background = '';
                    // // this.id = '';
                    // //=>Leave: 元のスタイルに戻します (元のスタイルは bg0、bg1、bg2 のいずれかです)
                    // this.className=this.myOldClass;

                    // }
                    // }
           //=>6.js 三項演算子を 3 つの方法で記述する 5 番目の方法 //=> 最初の記述方法 // function changeColor() {
                        // (var i = 0 ; i< ulList.length; i++){
                        // ulList[i].style.backgroundColor = i % 3 == 0 ? 'lightblue': ((i%3 ==1)?'lightgreen':'lightpink');
                        // }
                        // }
                        //色を変更します();
                     //=>2番目の書き方// 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 = 'ピンク')
                        //=>3 番目の書き方 // n === 0 ? liColor.style.backgroundColor='red': n === 1 ?liColor.style.backgroundColor='yellow' : liColor.style.backgroundColor='blue';
                        // }
             //=>7.js 6 番目の方法//=> 各グループを 1 回ループし、ループ本体では現在のグループのスタイルを設定します (現在のグループが 3 未満であるように見える場合があり、エラーが報告されます)
                    // var max = ulList.length - 1;
                    // (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;
                    // }
    </スクリプト>
</本文>

</html>

操作効果は以下のとおりです。

これで、HTML で交互線の色変更を実装するためのサンプルコードに関する記事は終了です。HTML で交互線の色変更についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: vue-video-player を使用してライブ放送を実現する方法

>>: Ubuntu 18.04.4 に MySQL をインストールするプロセスの詳細な説明