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

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

クラスを直接指定する場合

classNameを変更します。

単一のクラスを指定

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

複数のクラスを指定

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

クラスを全て削除する

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

クラスを追加する

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

単一

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

複数のクラスを追加

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

クラスを削除する

classListremove()を使ってクラスを削除します。

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

複数のクラスを削除

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

関連コンテンツ

スポンサードリンク

コメント

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