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

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

目次

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

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

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

ボックス1

コード

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

<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">ボックス1</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とボタン2を交互に押すとボタン2を押したときの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/

関連の記事

jQuery 要素にCSSを適用するサンプル(css)
jQuery CSSのクラスを適用/解除するサンプル(toggleClass)

△上に戻る