jQueryを使った動的スタイル変更—要素の表示・非表示とクラス操作
作成日:2012.01.25
ボタンクリックに合わせて、特定要素のスタイルを変更したい時に便利なjQueryの使い方を紹介します。文字色や背景色の変更から、要素の表示・非表示の切り替え、さらにクラスの追加・削除まで、柔軟にデザインを操作する方法を解説します。
error この記事は最終更新日から13年以上が経過しています。
ボタンクリックに合わせて、特定要素の背景色や文字色を変えたりというインターフェイスを実現するには、jQuery を使うのが手っ取り早いですね。
// div要素の文字色を変更
$("div").css("color","#9932cc");
上記のように、変更したいスタイルのプロパティと値をカンマ区切りで指定します。
複数のスタイルを一気にしたいする場合は、以下のようにさらにカンマ区切りで続ければ良いです。
// div要素の文字色と背景色の変更
$("div").css("color","#9932cc", "background-color", "#000000");
何らかのアクションに合わせて、ブロック要素の表示・非表示の切り替えをしたりするのもよくやりますが、これも display:none; と display: block; (または display: inline; etc) を切り替えれば良いわけですね。
// id="mesage" を非表示にする
$("#message").css("display", "none");
// id="message" を表示する
$("#message").css("display", "block");
クラスの追加と削除
上記のように css() を使って直接スタイルを指定するのも良いですが、デザインとの一元管理を考えると、クラスの追加・削除を活用した方が良いかもしれません。
// div要素にクラスClassNameを追加
$("div").addClass("ClassName");
// div要素からクラスClassNameを削除
$("div").removeClass("ClassName");
クラスAをクラスBに変更したい場合は、removeClass("ClassA") で削除した後に、addClass("ClassB") で追加してやれば、結果的にClassA が ClassB に変わったことになりますね。

奈良市を拠点に、25年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。
これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。
【制作会社・企業様向けサポート】
Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。
ぜひ、プロフィールやWeb制作会社様向け業務案内、一般企業様向け業務案内もご覧くださいね。
チェックボックス操作のためのjQuery基本メモ
2025.02.05
jQueryを使ってチェックボックスの状態を操作するための基本的なコードをまとめています。フォームやインタラクティブなUIを作成する際に役立つ内容です。
jQueryでフォームのreadonly属性を操作する方法
2025.02.04
jQueryを使ってフォーム要素のreadonly属性を動的に操作する方法について解説します。readonlyの設定と解除の手順をシンプルにまとめました。
ダッシュボードのパフォーマンス改善:Ajaxとiframeの実践例
2024.12.11
サーバーサイドですべてを処理してから画面を出力するのではなく、データを分割して効率的に表示する手法をご紹介。Ajaxとiframe、それぞれの特徴や実装例をわかりやすく解説します。
contenteditableで作るインライン編集システムとデータ送信の仕組み
2024.12.03
contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。