JavaScriptでElementのクラスを変更する

特定のElementに対してJavaScriptを使ってクラス属性を追加したり、削除する方法です。

classNameプロパティで変更する

ElementのプロパティclassNameを変更します。

単一のクラスを指定

document.getElementById(id).className = 'bg-info';

複数のクラスを指定

クラス名をスペースで区切って設定します。

document.getElementById(id).className = 'bg-info text-white';

クラスを全て削除する

空の文字列を設定します。

document.getElementById(id).className = '';

classListでクラスを追加する

classListadd()メソッドを使ってクラスを追加します。

単一

document.getElementById(id).classList.add('bg-info');

複数のクラスを追加

追加するクラスのリストをカンマで区切って渡します。

document.getElementById(id).classList.add('bg-info', 'text-white');

classListでクラスを削除する

classListremove()メソッドを使って削除するクラスを削除します。

document.getElementById(id).classList.remove('bg-info');

複数のクラスを削除

削除するクラスのリストをカンマで区切って渡します。

document.getElementById(id).classList.remove('bg-info', 'text-white');

トグル処理

toggle()メソッドは指定したクラスが設定されていれば削除、なければ追加します。

document.getElementById(id).classList.toggle('bg-info');

クラスが設定されているか確認する

contains()メソッドは指定したクラスが設定されている場合にtrueを返します。

document.getElementById(id).classList.contains('bg-info')
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です