LoginSignup
66
57

More than 5 years have passed since last update.

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

Last updated at Posted 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"
});
66
57
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
66
57