今更人に聞けない、jQueryでCSSの操作のやり方。

jQueryがJavascriptのフレームワークとして、ものすごーい普及してますね。
そんなわけで、今更ですが、jQueryでのCSSの操作の仕方。

.css( propertyName, value )

こんな感じ。普通にCSS書くのあんまり変わらないですね。
[js]
$(".red").css("background-color","#F00");
[/js]

でもこれだと複数プロパティを設定する場合、
[js]
$(".red").css("background-color","#F00").css("color","#FFF").css("width","300px");
[/js]
となって、読みづらいし、css()を何度も呼んでいるのでいまいち効率が悪い。。。。。

そんなわけで、別の書き方があります。

.css( map )

変数に連想配列で、CSSのプロパティを渡すことができます。

[js]
$(".red").css({
backgroundColor:"#F00",
color:"#FFF",
width:"300px"
});
[/js]

これだと、複数プロパティを一度に設定できます。

ただし、注意しなければいけないのが、配列のキーにプロパティ名が入るのですが、ここが、キャメルケースになってます。

要は、

background-color -> backgroundColor
z-index -> zIndex

と、ハイフンを消し、その後に続く文字を大文字にするということです。

また、クオートで挟む必要もありません。

JavaScriptを触ったことがある人だったら別にどうでも無いんでしょうが、自分が初めてjQueryを触ったときは、キャメルケースがさっぱりわけわかめでしたので。。。

ちなみに、連想配列での渡し方は.animate()メソッドでも一緒ですので、これが使えると、ちょっと、jQueryが楽しくなると思いますよ!!!