WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： プログラム >JavaScript

jQueryを使って要素のスタイルを変更するとき、皆さんはどのようにされていますか？
「ボタンを押したとき、文字を赤くしたい」「hoverされたとき、ボタンの色を変えたい」などそれぞれ一つずつの変化であればよいのですが、色々なスタイルを一度に設定したいときは、指定を一つひとつ書いていると面倒だったりします。

今回は、そんなときに役に立つ、要素にCSSをまとめて設定する方法をご紹介します。

一つひとつCSSを設定した場合

See the Pen jQuery_css01 by TAKASHI (@takashi1107) on CodePen.

上記のResultタブを押してご覧ください。画面中の「CHANGEボタン」を押したときに、

• ボックスの色が赤から青に変わる
• 横幅が100pxから200pxになる
• 高さが100pxから300pxになる

という変化が起こるようになっています。
ですが、JSタブを押してみていただくとわかるように、3つそれぞれの変化を実現するために、毎回

$('.box01').css(・・・)

という記述を書いており、非常に効率が悪いです。

じつはこちら、まとめて記述することが出来るんです。設定したいCSS項目が多い場合には非常に有効です。

まとめてCSSを設定した場合

See the Pen jQuery_css02 by TAKASHI (@takashi1107) on CodePen.

こちらも、上記のResultタブを押してご覧ください。先ほどと同じ処理を行っていますが、JSの記述が少し違うことがわかるかと思います。

$('.box01').css({
	'background': 'blue',
	'width': '200px',
	'height': '300px'
});

理屈はカンタンで、CSSの記述をカンマ区切りでつなげて書いていくだけです。
さきほどに比べて行数は逆に増えてしまっていますが、何度も登場していた

$('.box01').css(・・・)

こちらが1回だけになっています。そのため、コードの記述量としては減っていることになります。
ただし、.cssの直後の丸かっこ「(」の後ろに波かっこ「{」が増えていることに注意してください。

これで、設定するCSSが10項目でも20項目でも、格段に効率的に書くことができます。

まとめ

このような手法を使うことにより、コードを書く量を減らせるため、読み込みスピードアップや業務効率化につながっていくと思います。

ちなみに、同じことをするにでも、スタイル変更後のclassをCSS側であらかじめ用意しておいて、そのclassを「addClass」で付け加えることでも可能です。
状況に応じて、いろいろと使い分けてみてください。

次回は「jQueryで動的にコンテンツを追加したい」という内容でお送りする予定です。

本シリーズ、これまでの記事はこちら

jQueryでの「困った」を解決！（1）クリックしたのに動かない？
jQueryでの「困った」を解決！（2）時間差でclassを付け外ししたい！