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

nas

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

目次

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

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

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

ボックス１

コード

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

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

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

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

	$("#button1").click(function() {
		// CSSを指定して適用/非適用
		$(".box1").toggleClass('cssTest1');
	});
});
</script>

18行目のtoggleClassメソッドは、CSSが適用されていない場合は、4行目のCSSを適用します。
CSSが適用されている場合は4行目のCSSを解除します。

 

toggleClassメソッド

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

関連の記事

jQuery CSSの値を設定/取得するサンプル(css)
jQuery CSSのクラスを適用/解除するサンプル(addClass/removeClass)

△上に戻る