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

2018.11.26

jQueryを使って、特定の要素にcss複数適用させる時の記述パターン

$("div").css("color","#000000");
$("div").css("background-color","#f2f2f2");
$("div").css("text-align","center");

$("div").css("color","#000000");

$("div").css("background-color","#f2f2f2");

$("div").css("text-align","center");

これはあまり見やすくないですね。

var div_css = {
    "color":"#000000",
    "background-color":"#f2f2f2",
    "text-align":"center"
}
$("div").css(div_css);

var div_css = {

"color":"#000000",

"background-color":"#f2f2f2",

"text-align":"center"

}

$("div").css(div_css);

変数を使いまわしたい時などにおすすめ。

$("p").css({
    color:"#000000",
    backgroundColor:"#f2f2f2",
    textAlign:"center"
});

$("p").css({

color:"#000000",

backgroundColor:"#f2f2f2",

textAlign:"center"

});

私はこれが好きです。