jQueryで複数のclassをまとめて追加する

jQueryで複数のclassをまとめて追加する方法をメモ。

サンプルコード

addClass()にスペース区切りでclassを指定するといいようです。

HTML

<div id="sample">ここにclassを追加する</div>
<button id="add">class追加</button>

JavaScript

$(function() {
	$('#add').on('click', function() {
		$('#sample').addClass('color_red bg_blue fz_36');
	});
});

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

削除する場合も同様で、removeClass()にスペース区切りでclassを指定します。

HTML

<div id="sample">ここにclassを追加する</div>
<button id="add">class追加</button>
<button id="del">color_red と fz_36 を削除</button>

JavaScript

$(function() {
	$('#add').on('click', function() {
		$('#sample').addClass('color_red bg_blue fz_36');
	});
	$('#del').on('click', function() {
		$('#sample').removeClass('color_red fz_36');
	});
});

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

【参考サイト】

• .addClass() | jQuery API Documentation