過去には、JSまたはjQuery、hasclass、addclass、およびremoveclassのいくつかの方法を使用する必要がありました。面倒。
H5の新しいクラスリストを使用すると、より便利な要素のカテゴリ名を操作できます。
知らせクラスリストの互換性はやや貧弱で、IE10以下のIEブラウザと互換性がありません。
模範的な例
<! font-size:25px;} </style> </head> <body> <p>ボタンをクリックして、MystyleクラスをDIV要素に追加します。 </p> <button onclick = myfunction()>私をクリック</button> <div id = mydiv>私はdiv要素です。 </div> <script> function myfunction(){document.getElementById(myDiv).classlist.add(myStyle);} </scrip> </body> </html> </body> </html>新しいカテゴリ
ADDメソッドを使用して、ページ要素に1つ以上のカテゴリを追加できます。
document.getElementById(myDiv).classlist.add(mystyle);クラスを削除します
削除メソッドを使用すると、単一のCSSクラスを削除できます。
document.getElementById(myDiv).classlist.remove(mystyle);要素のカテゴリ名を切り替えます
要素のカテゴリ名を切り替えます。トグルメソッド、文法を使用:トグル(クラス、真| false)
最初のパラメーターは、要素で削除され、falseを返すクラス名です。
名前が存在しない場合、クラス名が要素に追加され、trueを返します。
2番目は、オプションのパラメーターです。そのような名前が存在するかどうかに関係なく、要素がクラスを追加または削除することを義務付けているかどうかを設定します。例えば:
削除します
document.getElementById(myDiv).classlist.toggle(classtoremove、false);
追加します
document.getElementById(myDiv).classlist.toggle(classtoadd、true);
注:Internet ExplorerまたはOpera 12およびその以前のバージョンは2番目のパラメーターをサポートしていません
特定のクラスが含まれているかどうかを確認してくださいcontainsメソッドを使用して、クラスが存在するかどうかを判断し、ブール値に戻ります。
// trueまたはfalse document.getElementById(myDiv).classlist.contains(mydiv);
上記は、この記事のすべての内容です。