jQuery CSSのクラスを追加/削除する(addClass)

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

目次

サンプル CSSのクラスを追加/削除する(addClass/removeClass)
  CSSのクラスを追加/削除する(toggleClass)

CSSのクラスを追加/削除する(addClass/removeClass)

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/3.4.1/jquery.min.js"></script>

<script>

	$("#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/

CSSのクラスを追加/削除する(toggleClass)

CSSのクラスを追加/削除するサンプルです。

ボタンを押すと、toggleClassメソッドでCSSのクラスを指定して背景色が青になります。
ボタンを再度押すとtoggleClassメソッドでCSSのクラスを削除して背景色が消えます。

ボックス

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

<style>
.box5{width:130px;height:80px;border:1px solid #000;
text-align:center;font-size:16px;}
.cssTest5{
    background-color:LightSkyBlue;
}
</style>
    
<div class="box5">ボックス</div>
<input type="button" id="button5" value="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    
        $("#button5").click(function() {
            // CSSを指定して適用/非適用
            $(".box5").toggleClass('cssTest5');
        });

</script>

17行目のtoggleClassメソッドは、CSSのクラスが追加されていない場合は、4行目のCSSのクラスを追加します。
CSSのクラスが追加されている場合は4行目のCSSのクラスを削除します。

toggleClassメソッド

  • jQueryのtoggleClassメソッドです。
  • 指定したCSSのクラスが追加されていない場合追加します。
  • 指定したCSSのクラスが追加されていた場合は削除にします。
  • 以下はjQueryサイトのtoggleClassメソッドのページです。
    http://api.jquery.com/toggleClass/

関連の記事

jQuery 要素にCSSを適用するサンプル(css)

△上に戻る