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

2021.12.05 2023.12.23

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

classNameプロパティで変更する

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

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

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

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

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

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

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

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

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

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

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

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')

JavaScriptでチェックボックスやラジオボタンの値を取得する方法

JavaScriptでJSONからクエリパラメータを生成する