こんにちは、福岡のホームページ制作シンス株式会社の越水です。

jQueryを使えばWebサイトがブラウザに表示された後でもCSSを変更することができます。

基本的なことではあるのですが、わりと何回もGoogleで検索したりしているのでこの際ブログに書いてしまったほうが良いなと思いました。

jQueryでCSSを変更するためのメソッドは.css()

Web制作をされている方ならばもう当たり前の情報なのですが、jQueryで任意の要素のCSSを変更するときには.css()というメソッドを使います。

例えばidがtextというp要素のフォントカラーを赤に変えたい場合は次のようにjQueryを書きます。

.cssの1つ目の引数がCSSプロパティで、2つ目の引数がプロパティの値です。

簡単です。簡単なんですよ。

なのに、なぜこの記事を書いているかというと、複数のCSSを変更したい場合は書き方が少し変化するからなんですね。

jQueryで複数のCSSを変更する場合の書き方

いつもこの書き方を忘れてしまい「あれ？どう書くんだっけ？」と毎回Google先生に聞くのが煩わしくなったのでしっかりと覚えるべくこの記事を書いています。

では本題に戻りましょう。jQueryで複数のCSSを変えたい場合は次のようにCSSメソッドを連ねて書けば出来ないこともありません。

ただ、似たような記述を繰り返したりするのはあまりスマートには見えませんし、処理コストも増えてしまいます。

そこで次のような書き方をすれば幸せになれます。

CSSメソッドのなかに{}を書いて、プロパティと値をコロン（:）で対にしています。プロパティと値のセットはカンマ（,）で区切って書きましょう。

変更するCSSプロパティが2つ程度のときはそれほどタイピング数が減るわけではありませんが、変更するCSSのプロパティが3つ4つと増えてくると断然こちらの書き方のほうが見やすくて良いです。

上記のソースコードにも書いてありますが、プロパティをダブルクオーテーション（””）またはシングルクオテーション（”）で括らないときは、プロパティをキャメルケース記法で書くことに注意です。