jQuery CSSのクラスを指定してCSSを適用/非適用するサンプル(toggleClass)

jQueryの要素にスタイルシートのCSSを適用/非適用するサンプルです。
toggleClassメソッドを使用します。

サンプル

jQueryのtoggleClassメソッドを使用したサンプルです。
ボタン1を押すとボックス1の背景色が青になります。再度押すと初期状態に戻ります。

ボックス1

コード

上記サンプルのコードです。
19行目のtoggleClassメソッドは、以下の操作を行います。
・9-11行目のCSSが適用されていない場合は9-11行目のCSSを適用します。
・9-11行目のCSSが適用されている場合は9-11行目のCSSを非適用にします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのtoggleClassのサンプル</title>
<style>
.box1{width:130px;height:80px;border:1px solid #000;
text-align:center;font-size:16px;}
.cssTest1{
	background-color:LightSkyBlue;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1を押したとき
	$("#button1").click(function() {
		// cssTest1を指定して適用/非適用
		$(".box1").toggleClass('cssTest1');
	});
});
</script>
</head>
<body >
<div class="box1">ボックス1</div>
<input type="button" id="button1" value="ボタン1" /><br/>
</body>
</html>

toggleClassメソッド

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

関連の記事

jQuery 要素にCSSを適用するサンプル(css)
jQuery CSSのクラスを指定してCSSを適用/非適用するサンプル(addClassとremoveClass)



△上に戻る