ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

jQueryで指定した要素のCSSを変更する方法

| カテゴリー : JavaScript

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つと増えてくると断然こちらの書き方のほうが見やすくて良いです。

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

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。