jQuery – style属性のプロパティの値を取得・追加『 css() 』

※タイトルが長い間「class()」となっていましたが、「css()」の間違いです。。。

フォントの色を変更する場合、HTMLに「style=”color: #CC0000;”」等の記述をします。jQueryでも「class()」style属性を操作できます。

//id=msgの要素のstyle属性のcolorの値を取得する
$("#msg").css("color");
//id=msgの要素のstyle属性にcolor:redを追加する
$("#msg").css("color":"red");
//id=msgの要素のstyle属性にcolor:redとbackground-color:000000を追加する
$("#msg").css({"color":"red" , "background-color":"000000"});

プロパティは一つだけでなく複数設定することができます。
1つの場合は「css(“プロパティ名”,”設定する値”)
複数の場合は「css({“プロパティ名”:”設定する値” , “プロパティ名”:”設定する値”})
と指定します。
, (カンマ)」「 { } (中括弧)」「 : (コロン)」の使い方に注意しましょう。

jQuery – css サンプル

またjQuery – css サンプルを「IE」と「Firefox」で見比べるとわかるのですが、IEでは値に指定したそのままの値「000000」表示され、Firefoxでは「rgb(0,0,0)」と表示が変わります。いろいろ試してみたのですが短縮プロパティ(border:1px solid #000000等)を指定するとMacのSafariでは値が取得できませんでした。

jQueryにはCSSのクラスを追加・削除できるメソッドも用意されています。「css()」を使うよりも、CSSでスタイルを指定してCSSのクラスを操作した方がいいかもしれませんね。