小粋空間  -  a cheap joke and a play on words site

jQueryでCSSをまとめて書き換える方法のまとめ

jQueryでCSSをまとめて書き換える方法をまとめました。

１．問題点

jQueryでCSSを書き換えるには次のように記述します。

$("p").css("color", "#f00");

複数のプリパティをまとめて書き換えるにはメソッドチェーンを使う方法があります。

$("p").css("color", "#f00").css("background-color", "#00f");

が、よりスマートに書く方法が分かりません。

２．jQueryでCSSをまとめて書き換える（基本）

jQueryでCSSを書き換えるには、css()のパラメータにハッシュ形式（全体を{}で括り、プロパティ名と値をコロンで区切る）で記述する方法があります。

$("p").css({
    "color": "#f00"
});

そしてプロパティをカンマで区切ることで、複数のプロパティをまとめて記述することができます。

$("p").css({
    "color": "#f00",
    "background-color": "#00f"
});

プロパティ名のクォーテーションはオプションなので省略可能です。

$("p").css({
    color: "#f00"
});

ただしプロパティ名にハイフンが含まれる場合は必須となります。

$("p").css({
    "background-color": "#00f"
});

クォーテーションはシングルクォーテーションまたはダブルクォーテーションのいずれも可能です。

$("p").css({
    'color': '#f00',
    'background-color': '#00f'
});

３．jQueryでCSSをまとめて書き換える（キャメルケースで記述）

プロパティ名はキャメルケース（単語の区切りを大文字）で記述することも可能です。

$("p").css({
    color: "#f00",
    backgroundColor: "#00f"
});

４．jQueryでCSSをまとめて書き換える（変数に保持）

プロパティの設定を変数に保持する方法もあります。

var styles = {
    color: "#f00",
    'background-color': "#00f"
};
$("p").css(styles);