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]
コメント(16)
smipiv
njszeawu http://paydayloansvmg.com/ payday loans
lpofma http://paydayloansdpf.com/ payday loans online
Hello!
uuavaw http://cheapviagrarrr.com/ viagra
I am very happy to read this. This is the kind of manual that needs to be given and not the random misinformation t hat's at the other blogs. Appreciate your sharing this best posting.
If some one needs to be updated with hottest technologies then he must be pay a quick visit this web page and be up to date everyday.
toermuz
ojfzlnaw http://buyviagrajlp.com/ viagra
gabarp http://paydayloanssqp.com/ payday loans
bfosrdrv http://orderviagramtc.com/ how to order viagra
iyywnm http://paydayloans2ue.com/ pay day loans
This web site is really a walk-through for all of the info you wanted about this and didn’t know who to ask. Glimpse here, and you’ll definitely discover it….
Thanks for the data, perhaps I will use this over my tufted selling and i have been use much annulus Mainedia in run a interaction and that they somebody existing a giant amend on me.
Hello!
Hello!
コメントする