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

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

.css( propertyName, value )

こんな感じ。普通にCSS書くのあんまり変わらないですね。

でもこれだと複数プロパティを設定する場合、

となって、読みづらいし、css()を何度も呼んでいるのでいまいち効率が悪い。。。。。

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

.css( map )

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

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

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

要は、

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

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

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

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

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