JavaScriptでElementのクラスを変更する
特定の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');