HTML5-CLASSLISTスタイルの操作

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スタイル> 
        .red { 
            色：赤
        } 
        .green { 
            色：緑; 
        } 
        .blue { 
            色：青。
        } 
        .underline { 
            テキスト装飾：下線; 
        } 
    </スタイル> 
</ head> 
<body> 
<UL> 
    <LIクラス= "赤">前端与移动开发</ LI> 
    <LIクラス= "青">のJava </ LI> 
    <LI>
<input type =「ボタン」値 「= ID =「追加」第1要素Liなどのスタイルに」> 
の<input type =「ボタン」値 =「 第二のli要素を除去するためのスタイル」ID =「削除」 > 
の<input type = "ボタン"値= "スタイル第三のスイッチングli要素" ID = "トグル"> 
の<input type = "ボタン"値= "第四のli要素を分析スタイルが含まれている" ID = "を含む"> 
<スクリプト> 
    window.onload =関数（）{ 
        / *追加:.のみの要素のスタイルパターン* /追加することができ、指定した名前を追加
        document.querySelector（ "追加＃"）のonclick =関数（）。 { 
            / * CLASSLIST：現在のすべての要素のスタイルリスト-アレイ* / 
            document.querySelector（ "LI"）classList.add（ "赤"）;. 
            document.querySelector（ "LI"）classList.add（ "アンダーライン"）。 ;
            //document.querySelector("li").className="red「下線
            / * / *取得したスタイルを
            。VARのdocument.querySelector結果=（ "李"）classList.item（2）; 
            はconsole.log（結果）; 
        } 

        / *削除：要素の名前のスタイルを削除する（クラス属性が削除されていない）、一度だけリムーバブル* / 
        document.querySelector（ "＃削除"）のonclick =関数（）{。
            document.querySelector（ "ブルー"）classList.remove（ "ブルー"）;. 
        } 

        / *トグル：スイッチング素子のスタイル：あなたはスタイル要素の名前を指定しない場合の前に追加されます。次に* /が削除された場合
        document.querySelector（ "＃トグル"）のonclick =関数（）{。
            Document.querySelectorAll（ "李"）[2] .classList.toggle（ "グリーン"）; 
        } 

        / *含ま：分析を要素は、指定されたスタイルの名前が含まれている真/偽に* /に戻り
        document.querySelector（「＃が含まれている」）。onclickの=関数（）{
            VAR isContain = document.querySelectorAll（ "LI"）[3] .classList.contains（ "赤色"）。
            console.log（isContain）。
        } 
    } 
</ SCRIPT>
</ BODY> 
</ HTML>
HTML5-CLASSLISTスタイルの操作

おすすめ
