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

JQ

2018/03/16

jQueryでの「困った」を解決!(3)CSSをまとめて設定したい!

投稿者: 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を付け外ししたい!

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ