jQuery CSSのクラスを適用/解除するサンプル(addClass/removeClass)

jQueryのCSSのクラスを適用/解除するサンプルです。
addClassメソッドとremoveClassメソッドを使用します。

CSSのクラスを適用/解除する
addClassメソッド
removeClassメソッド

CSSのクラスを適用/解除する

CSSのクラスを適用/解除するサンプルです。

ボタン1を押すと、addClassメソッドでCSSのクラスを指定して背景色がピンクになり文字が小さくなります。
ボタン2を押すと、addClassメソッドでCSSのクラスを指定して背景色が青になり文字が大きくなります。
ボタン3を押すと、removeClassメソッドで設定したCSSのクラスを解除します。

ボックス１

コード

上記サンプルのコードです。

<style>
.box1{width: 130px;height: 80px;border:1px solid #000;
text-align:center;font-size:16px;}
.cssTest1{
	font-size:14px;
	background-color:MistyRose;
}
.cssTest2{
	font-size:20px;
	background-color:LightSkyBlue;
}
</style>

<div class="box1">ボックス１</div>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />
<input type="button" id="button3" value="ボタン3" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		// cssTest1を指定して適用
		$(".box1").addClass("cssTest1");
	});

	$("#button2").click(function() {
		// cssTest2を指定して適用
		$(".box1").addClass("cssTest2");
	});

	$("#button3").click(function() {
		// cssを解除
		$(".box1").removeClass("cssTest1 cssTest2");
	});
});
</script>

25行目は、addClassメソッドで9行目のCSSのクラスを適用しています。
30行目は、addClassメソッドで12行目と15行目の2つCSSのクラスを適用しています。
35行目は、removeClassメソッドで適用されたCSSのクラスを非適用にしています。引数のクラス名を半角空白で区切ると複数のクラスを対象にできます。

ボタン1とボタン２を交互に押すとボタン２を押したときのCSSのクラスが優先されます。
1つの要素に複数のクラスを指定していてかつ属性がかぶっている場合、後にあるクラスの属性が優先されます。
4-7行目と8-11行目を入れ替えると優先順位が代わることを確認できます。

addClassメソッド

jQueryのaddClassメソッドです。
指定したCSSを適用します。
以下はjQueryサイトのaddClassメソッドのページです。
http://api.jquery.com/addClass/

removeClassメソッド

jQueryのremoveClassメソッドです。
指定したCSSを非適用にします。
以下はjQueryサイトのremoveClassメソッドのページです。
http://api.jquery.com/removeClass/