JavaScriptで特定の要素へのClass属性の追加・削除に便利なclassListメソッドの使い方

特定の要素へのClass属性の追加・削除に便利なclassList

JavaScriptで特定のHTML要素のClass属性の値を操作するにはclassListメソッドが便利です。

ボタンのクリックなどのユーザー操作に応じて、テキストの色を変えたりする場合に利用されます。

メソッド

メソッド意味返り値
要素.classList.add(クラス1, クラス2…)クラスを追加なし
要素.classList.remove(クラス1. クラス2…)クラスを削除なし
要素.classList.contains(クラス) クラスが存在するかを確認真偽値

サンプルコード

ページを開いてから3秒後にテキストの色を変え,かつ太さを変更するサンプルコードを紹介します。

そのさらに3秒後にもとに戻します。

Output
3秒後に色を変え、太さも変わります。そして6秒後に元に戻ります。
Pug
#targetText 3秒後に色を変え、太さも変わります。そして6秒後に元に戻ります。
JavaScript
const targetText = document.getElementById('targetText');

setTimeout(() => {
	//色を変え、太さを変えます。
	targetText.classList.add('font-weight-bold','text-danger');
}, 3000);

setTimeout(() => {
	//元に戻します。
	targetText.classList.remove('font-weight-bold','text-danger');
}, 6000);
インストラクター
コメント

コメントを残す