クラス名(class属性の値)の追加と削除を切り替える

クラス名(class属性の値)の追加と削除を切り替えるには、element.classList.toggleメソッドを使用します。

  • ※ IE9以下は対応していません。

構文

element.classList.toggle(targetClassName);

引数

引数名 説明
第一引数
必須
targetClassName string 切り替えるクラス名

JavaScript

var sampleElement = document.getElementById('sample');

sampleElement.addEventListener('click', function() {
	this.classList.toggle('foo');
});

JavaScript逆引きリファレンス一覧へ戻る