jQueryで複数のclassを追加・削除する

jQueryのaddClass()とremoveClass()を使って、複数のclassを追加したり削除したりする方法を調べました。

addClass()

addClass()で複数のclassを追加してみます。
ボタンをクリックすると#sampleにclassを追加するようにしてみます。

HTML

<button id="add">class追加</button>
<div id="sample">サンプル</div>

CSS

.font-l {
	font-size: 32px;
}
.color-red {
	color: red;
}

addClass()を繋げて複数のclassを追加してみます。

JavaScript

$(function() {
	$('#add').on('click', function() {
		$('#sample').addClass('font-l').addClass('color-red');
	});
});

複数のclassを追加するデモページ
　

もしくは、半角スペースで区切ることで複数のclassを指定することもできます。

JavaScript

$(function() {
	$('#add').on('click', function() {
		$('#sample').addClass('font-l color-red');
	});
});

複数のclassを追加するデモページ2
　

removeClass()

次にremoveClass()で複数のclassを削除してみます。

HTML

<button id="remove">class削除</button>
<div id="sample" class="font-l color-red">サンプル</div>

先ほどと同様に、removeClass()を繋げることで複数のclassを削除できます。

JavaScript

$(function() {
	$('#remove').on('click', function() {
		$('#sample').removeClass('font-l').removeClass('color-red');
	});
});

複数のclassを削除するデモページ
　

もしくは、半角スペースで区切って指定します。

JavaScript

$(function() {
	$('#remove').on('click', function() {
		$('#sample').removeClass('font-l color-red');
	});
});

複数のclassを削除するデモページ2
　

半角スペースで区切る方法は順番がHTMLと異なっていても問題ないようです。

JavaScript

$(function() {
	$('#remove').on('click', function() {
		$('#sample').removeClass('color-red font-l');
	});
});

複数のclassを削除するデモページ3
　

【参考サイト】

• .addClass() | jQuery API Documentation
• .removeClass() | jQuery API Documentation