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

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

Posted at March 20,2015 1:55 AM
Tag:[CSS, jQuery]

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

1.問題点

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

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

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

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

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

2.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'
});

3.jQueryでCSSをまとめて書き換える(キャメルケースで記述)

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

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

4.jQueryでCSSをまとめて書き換える(変数に保持)

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

var styles = {
    color: "#f00",
    'background-color': "#00f"
};
$("p").css(styles);
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)