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

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

サンプル

jQueryのaddClassメソッドとremoveClassメソッドを使用したサンプルです。
ボタン1を押すと、addClassメソッドでボックス1の背景色が青になります。
ボタン2を押すと、addClassメソッドでボックス1の背景色がピンクになり文字が大きくなります。
ボタン3を押すと、removeClassメソッドで背景色と文字の色を初期状態に戻します。

ボックス1



コード

上記サンプルのコードです。
25行目は、addClassメソッドで9行目のCSSのクラスを適用しています。
30行目は、addClassメソッドで12行目と15行目の2つCSSのクラスを適用しています。
35行目は、removeClassメソッドで適用されたCSSのクラスを非適用にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのサンプル</title>
<style>
.box1{width: 130px;height: 80px;border:1px solid #000;
text-align:center;font-size:16px;}
.cssTest1{
	background-color:LightSkyBlue;
}
.cssTest2{
	font-size:20px;
}
.cssTest3{
	background-color:MistyRose;
}
</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").addClass('cssTest1');
	});
	// ボタン2が押されたときの動作
	$("#button2").click(function() {
		// cssTest2を指定して適用
		$(".box1").addClass('cssTest2 cssTest3');
	});
	// ボタン3が押されたときの動作
	$("#button3").click(function() {
		// 適用したcssを非適用
		$(".box1").removeClass('cssTest1 cssTest2 cssTest3');
	});
});
</script>
</head>
<body >
<div class="box1">ボックス1</div>
<input type="button" id="button1" value="ボタン1" /><br/>
<input type="button" id="button2" value="ボタン2" /><br/>
<input type="button" id="button3" value="ボタン3" /><br/>
</body>
</html>

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のクラスを指定してCSSを適用/非適用するサンプル(toggleClass)




△上に戻る