サイト制作に関するメモ書き

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

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を削除するデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP