【jQuery】cssを変更・追加する

jQueryで非常によく使うcssの書き換えや変更方法を書きたいと思います。

$(“.class”).css()

.classのところは任意のクラス名やID名、タグ名を入れてください。

クラス名の場合は「.クラス名」（ドット）
ID名は「#ID名」（シャープ）
タグ名はそのまま「div」や「img」など。

css()のカッコ内にスタイルを書いていきます。
基本的にはcssで書くのと同じような形式なので、馴染みやすいかと思います。
では実際の例を見てみましょう。

サンプル

HTML

<p class="hoge">今日はいい天気だなぁ</p>

jQuery

$(".hoge").css("color","#f00");

今日はいい天気だなぁ

hogeのクラスにcolor:#f00のスタイルが適用されます。

更に複数のスタイルを適用したい場合は、

複数のスタイルを適用

$(".hoge").css({"color":"#f00","font-weight":"bold"});

今日はいい天気だなぁ

複数の場合はご覧の通り少し書き方が変わります。

• .css()のカッコ中に{}を入れる
• 更に“color”:“#f00”のようにコロン区切りとなる
• 次のスタイルを書く場合は、「,」コンマで区切る

こうしてコロンで区切っていけば、いくらでもスタイルを指定できます。

$(".hoge").css({"color":"#f00","font-weight":"bold","text-align":"right","background":"#000 
 url('img/test.jpg') no-repeat","width":"300px","height":"auto"});