jQuery CSSの値を設定/取得するサンプル(css)

jQueryのCSSの値を設定/取得するサンプルです。
cssメソッドを使用します。

CSSのプロパティと値を設定/取得するサンプル
CSSメソッド

CSSの値を設定/取得するサンプル

CSSの値を設定/取得するサンプルルです。
ボタン1を押すと、cssメソッドで背景色を変えます。
ボタン2を押すと、cssメソッドで背景色とフォントサイズを変えます。
ボタン3を押すと、設定したフォントサイズを取得し表示します。

ボックス１

フォントサイズ：　

コード

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

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

<div id="box1">ボックス１</div>
<p id="p1">フォントサイズ：　</p>
<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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		$("#box1").css("font-size","14px");
	});

	$("#button2").click(function() {
		$("#box1").css({
			"background-color":"LightSkyBlue",
			"font-size":"20px"
		});
	});

	$("#button3").click(function() {
		const size1 = $("#box1").css("font-size");

		if(size1 === "20px"){
			$("#p1").text("フォントサイズは20pxです");
		}else if(size1 === "14px"){
			$("#p1").text("フォントサイズは14pxです");
		}
	});
});
</script>

16行目は、cssメソッドでフォントのサイズを設定しています。
21,22行目は、cssメソッドで複数のプロパティと値を指定しています。
background-color,font-sizeがプロパティです。LightSkyBlue,20pxは値です。
27行目は、cssメソッドで現状のフォントサイズを取得しています。
29,31行目は、if文でフォントサイズを判定しています。

cssメソッド

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