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が楽しくなると思いますよ!!!