こんにちはかめのです。
前回：【jQuery入門 6】要素の書き換え 追加・削除
前回は要素の書き換えなどでした。
今回はjQueryのCSSの取得・変更・追加についてご紹介します。
目次
はじめに
桃太郎に登場するどうぶつといえば
- サル
- イヌ
- キジ
ですね。
それではどうぶつたちを使って、CSSの取得・追加・変更についてみていきましょう。
CSSの取得・追加・変更
CSSプロパティ
|
1 2 3 |
[sourcecode lang="javascript"] $('.demo').css('color','red'); [/sourcecode] |
CSSプロパティとは.cssのあとに入る”color”などのこと。
ここでスタイルシートの指定ができます。
今年は申年なので「サル」だけ色を変えてみたいと思います。
DEMO 01 : 今年の干支のどうぶつ
html
|
1 2 3 4 5 6 7 |
[sourcecode lang="html"] <ul class="momotaro"> <li class="saru">サル</li> <li class="inu">イヌ</li> <li class="kiji">キジ</li> </ul> [/sourcecode] |
jQuery
|
1 2 3 4 5 6 |
[sourcecode lang="javascript"] $(function() { // DEMO 01 : $('.momotaro .saru').css('color', '#cc0000'); }); [/sourcecode] |
非表示にする
よく見ると、この中に「干支」に登場していないどうぶつがいます。
そのどうぶつを非表示にしてみたいと思います。
DEMO 02 : 干支に登場しているどうぶつだけを表示
html
|
1 2 3 4 5 6 7 |
[sourcecode lang="html"] <ul class="momotaro"> <li class="saru">サル</li> <li class="inu">イヌ</li> <li class="kiji">キジ</li> </ul> [/sourcecode] |
jQuery
|
1 2 3 4 5 6 |
[sourcecode lang="javascript"] $(function() { // DEMO 02 : $('.momotaro .kiji').hide(); }); [/sourcecode] |
やっぱり表示する
DEMO 03 : やっぱり桃太郎に登場するどうぶつを表示
html
|
1 2 3 4 5 6 7 |
[sourcecode lang="html"] <ul class="momotaro"> <li class="saru">サル</li> <li class="inu">イヌ</li> <li class="kiji">キジ</li> </ul> [/sourcecode] |
jQuery
|
1 2 3 4 5 6 |
[sourcecode lang="javascript"] $(function() { // DEMO 03 : $('.momotaro .kiji').show(); }); [/sourcecode] |
さいごに
いかがでしたか？
使い方はとても簡単！
いつも使っているスタイルシートとほぼ同じなのでとてもわかりやすいですね。
CSSプロパティで指定すれば簡単に変更できます。
表示、非表示も適用させたいセレクタに指定すればよいのでとても便利ですね。
次回はこちらです。
参考URL
http://api.jquery.com/css/
http://api.jquery.com/show/
http://api.jquery.com/hide/
jQuery入門ガイド
- 【初心者】さくっと見れるjQueryの使い方
- 【jQuery入門 1】超基本！ jQuery のダウンロードと書き方
- 【jQuery入門 2】セレクタって何？要素を取得しよう。基本編
- 【jQuery入門 3】要素を取得しよう。セレクタって何？機能的セレクタ編
- 【jQuery入門 4】イベントって何？on、offを使ってみよう
- 【jQuery入門 5】要素の属性の取得と書き換え
- 【jQuery入門 6】要素の書き換え、追加・削除
- 【jQuery入門 7】CSSの取得・追加・変更をしよう
- 【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。
- 【jQuery入門 9】Animateなどを使って様々なアニメーションをつけよう
- 【jQuery入門 10】プラグインを使ってみよう。
