https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-classlist-toggle-method-to-switch-the-presence-or-absence-of-the-class-of-a-specific-element-in-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-classlist-toggle-method-to-switch-the-presence-or-absence-of-the-class-of-a-specific-element-in-javascript/

JavaScriptで特定の要素のクラスの有無を切り替えるclassList.toggle()メソッドの使い方

特定の要素へのClass属性の追加・削除を交互に行うclassList.toggle

JavaScriptで特定のHTML要素のClass属性の値を交互入れ替える操作を組むにはclassList.toggle()メソッドが便利です。

メソッド

メソッド意味返り値
要素.classList.toggle(クラス)クラスを切り替えるなし

サンプルコード

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

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

Output
私は書き換え前のテキスト。3秒後に色を変え、太さも変わります。
Pug
#targetText 私は書き換え前のテキスト。3秒後に色を変え、太さも変わります。
JavaScript
const targetText = document.getElementById('targetText');
setTimeout(() => {
	//色を変え、太さを変えます。
	targetText.classList.toggle('font-weight-bold');
	targetText.classList.toggle('text-danger');
}, 3000);
setTimeout(() => {
	//元に戻します。
	targetText.classList.toggle('font-weight-bold');
	targetText.classList.toggle('text-danger');
}, 6000);
インストラクター
コメント

コメントを残す