More than 5 years have passed since last update.

jQueryでCSSの値を複数設定するときの記述

Last updated at 2018-04-15Posted at 2012-12-26

jQueryを使って、CSSを変更することがあるかと思います。
そのたびに、

script.js

$("p").css("color","red");
$("p").css("font-size","16px");
$("p").css("font-weight","bold");

と同じような記述を続けてしまうのはちょっと嫌だなという人には、こちらの記述をオススメ。

script.js(キャメルケース)

var p_props = {
	color:"red",
	fontSize:"16px",
	fontWeight:"bold"
}
$("p").css(p_props);

プロパティの記述をスタイルシートと同じような書き方(≠キャメルケース)にしたいときは、プロパティと値をダブルクォーテーションで括って記述します。

script.js(スタイルシートと同じような書き方)

var p_props = {
	"color" : "red",
	"font-size" : "16px",
	"font-weight" : "bold"
}
$("p").css(p_props);

わざわざ変数に値を入れたくないというときはこんな記述。

script.js

$("p").css({
	color:"red",
	font-size:"16px",
	font-weight:"bold"
});