Edited at

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

More than 1 year has passed since last update.

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"
});