ネイティブjsが、シンプルなボックスを開発し、色の変化をクリックして、色を[キャンセル]をクリックし、3つのソリューション

 この記事の主な焦点

4つの方法がありますCLASSLIST

//（「クラス名」）を追加します。追加、例えば、クラスの要素を追加する（「チェックします」）

//（「クラス名」）を削除し、クラスを削除

//は、（「クラス名」）を含んでいる; CLASSLISTは、このクラスに含まれる要素は、リターンを真、そうでない場合はfalse含まれているかどうかを判断します     

//トグル（）このクラスの要素がある場合、我々は削除させていただきます、またはクラスを追加するために、クラスを切り替えます

レンダリング：

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル>复选框</ タイトル> 
    < スタイル> 
        .OPTIONS>
            マージン：20ピクセル; 
        } 
        
        .checkedを{ 
            色：赤重要！。
        } 
    </ スタイル> 
</ ヘッド> 

< 身体> 
    < divのクラス= "ボックス" > 
        < divのクラス= "オプション" > 
            < HREF = "javascriptの:;" クラス= "確認" >语文</ A > < のhref = "javascriptの:;" >
            > 
            < HREF = "JavaScriptを：;" >英語</ A > </ DIV > </ DIV > < スクリプト> // 目標：チェックボックスの効果、スタイルはシンプルで、フォントの色をクリックして変更することができVARのリストを= document.querySelectorAll（" .OPTIONSのA " ）; // 最初のタグを取得すべて        にconsole.log（一覧）; // クラスの配列// list.onclick =関数（）{//要素のセットは、唯一の直接操作ではありませんそれは要素のセットのみであっても、添字オペレータによって// } ため（VARのI = 0 、I
        
    
    
        
        

        

        
         < List.length; Iは++ ）{ 

            リスト[I] .onclick =  関数（）{ 

                // 最初の方法は、クラス名、クラス名が、ナイロン複数の場合が判定される
                // IF（this.className == '）がチェック' {これはクラスが含まれている場合//、クラスを削除するためにクリックし
                //      this.className = ''; 
                // } //それ以外の他のキャンセル{ 
                //      this.className = ''にチェック; 
                // } 

                / / 第二の方法：CLASSLIST 
                // はconsole.log（this.classList）; 
                //は、4つの方法があるCLASSLIST 
                // 追加（「クラス名」）;このような追加などの要素にクラスを追加するには、（「チェック」）              
                / / 削除（「クラス名」）;クラスを削除する             
                //（「クラス名」）を含んでいる; CLASSLISTは、このクラスに含まれる要素は、真のリターンが含まれているかどうかを決定し、それ以外の場合はfalseを返します                     
                // このクラス、我々は削除させていただきます、またはクラスを追加するための要素がある場合トグル（）切り替えクラスは、


                // もし（this.classList.containsは（「確認」） ）{// CLASSLISTは、このクラスが含まれている場合は、削除クラスをクリックするか、または追加クラス
                //      this.classList.remove（「確認」）; 
                // }他{/ /またはキャンセル
                //      this.classList.add（ "チェック"）; 
                // } 

                // 第三の方法は、トグル
                この.classList.toggleを（' 確認' ）; 

            } 
        } 
    </ スクリプト> 
</ ボディ> 

</ HTML >