【jQuery】特定の要素に対して複数のcssプロパティを指定する

2016.08.01

jQueryを使っている時に複数のCSSの変更を与えたい

イメージ画像
jQueryを使っている時に複数のCSSの変更を与えたい時、
jQueryの「.css()」という記述を使用してCSSの変更を反映します。

その際は、
JavaScript:
$(this).css("color","#000");
$(this).css("background-color","#FFF");
と記述してもOKなのですがコードが冗長化してしまうので、
まとめて書いたほうがコードもすっきりして見やすくなります。

上記の例だと、
JavaScript:
$(this).css({"color":"#000","background-color":"#FFF"});
という形で記述することができます。

まとめて記述する方法は下記の方法でもOKで、
こちらのほうがより変更などの反映はしやすいかと思います。
JavaScript:
var prop = {
    "color" : "#000",
    "background-color" : "#FFF",
    "font-weight" : "bold"
}
$(this).css(prop);
各CSSプロパティがキャメルケースかそうじゃないか(fontWeight 、 font-weight)は、
シングルクォーテーションまたはダブルクォーテーションでくくるかそうじゃないかなので、
CSSを記述するように書きたい場合はシングルクォーテーションまたはダブルクォーテーションでくくる形で記述します。

参考にしたホームページ・ブログ- I thank for this article. -

← 【16進数・RGB・RGBAカラーコード変換ツール】16進数のカラーコードをRGB・RGBAのカラーコードに変換してくれるウェブサービス
【WAIT! Animate】CSSのキーフレームを使った複雑なアニメーション作成できるウェブサービス →