jQuery で指定した要素のスタイルを変更する方法
2012年1月25日 20:38
jQuery の超小ネタメモ。
ボタンクリックに合わせて、特定要素の背景色や文字色を変えたりというインターフェイスを実現するには、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 に変わったことになりますね。
つぶやく
- 関連するブログ記事
-
スポンサード リンク
- カテゴリー
- jQuery | スタイルシート(CSS)
- タグ
- addClass | css | JavaScript | jQuery | removeClass
- 現在位置
- TOP > Web制作技術 > jQuery > jQuery で指定した要素のスタイルを変更する方法
- 前のブログ記事
- 『WebデザイナーのためのPHP入門講座』の講師をします【1/28(土) 神戸・カフーツ】 [2012年1月16日 12:21]
- 次のブログ記事
- jQuery で iframe 内のウィンドウから親ウィンドウの要素を操作する方法 [2012年1月26日 16:26]
コメント(0)
コメントする