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

jQueryの要素にCSSを適用するサンプルです。
cssメソッドを使用します。

サンプル

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

ボックス1



コード

上記サンプルのコードです。
16行目は、cssメソッドで背景色を指定しています。
21-23行目は、cssメソッドで複数のプロパティを指定しています。
プロパティとは、22,23行目でいうとbackground-color,font-sizeがプロパティです。MistyRose,20pxは値です。
29行目は、cssメソッドで文字の大きさを指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのCSSのサンプル</title>
<style>
#box1{width: 130px;height: 80px;border:1px solid #000;
text-align:center;font-size:16px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1が押されたときの動作
	$("#button1").click(function() {
		// cssで背景色を指定
		$("#box1").css('background-color','LightSkyBlue');
	});
	// ボタン2が押されたときの動作
	$("#button2").click(function() {
		// cssで複数のプロパティを指定
		$("#box1").css({
			'background-color':'MistyRose',
			'font-size':'20px'
		});
	});
	// ボタン3が押されたときの動作
	$("#button3").click(function() {
		// cssで文字の大きさを指定
		$("#box1").css('font-size','16px');
	});
});
</script>
</head>
<body >
<div id="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>

cssメソッド

  • jQueryのcssメソッドです。
  • 指定したCSSを適用します。
  • 以下はjQueryサイトのcssメソッドのページです。
    http://api.jquery.com/css/

関連の記事

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




△上に戻る