技術資料

error この記事は最終更新日から12年以上が経過しています。

ボタンクリックに合わせて、特定要素の背景色や文字色を変えたりというインターフェイスを実現するには、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 に変わったことになりますね。