Web制作の現場で使えるjQuery UIデザイン入門 ― 第5回
サンプルで学ぶjQuery：(X)HTML/CSSを操作する
2009年08月06日 11時55分更新
10．CSSの制御
jQueryでは、CSSのプロパティの設定や値の取得も簡単にできます。
■CSSの設定
css() を使うと、指定した要素のCSSのプロパティを設定できます。プロパティ名と設定したい値を括弧内に ,(カンマ)区切りで記述します。
▼サンプルコード（スクリプト部分）
$("p").css("color","red");
このサンプルを実行すると、p要素のCSSのcolorプロパティがredに変更され、p要素のテキストが赤色で表示されます。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキストテキストテキストテキスト</p>
▼実行結果（実際のWebページ）
 |
|---|
複数のCSSプロパティを同時に設定したい場合は、css() の括弧内に {...} で以下のように記述します。
$(セレクター).css({
プロパティ名 : "プロパティの値" ,
プロパティ名 : "プロパティの値" ,
(中略)
プロパティ名 : "プロパティの値"
});
プロパティ名とプロパティの値は :(コロン)でつなげ、値は "(ダブルクオーテーション)で包みます。CSSはグループセレクターのように ,(カンマ)でつなげていきます。
ここで指定するプロパティ名は、CSSとルールが少し違うので注意しましょう。CSSのプロパティ名に -(ハイフン)が含まれる場合はハイフンを削除し、その後に続く最初のアルファベットを大文字に変更する必要があります。たとえば、background-colorプロパティは「backgroundColor」、font-weightは「fontWeight」と書きます。慣れない間は特に気を付けてください。
▼サンプルコード（スクリプト部分）
$("p").css({
backgroundColor : "yellow",
fontWeight : "bold",
color : "red"
});
このサンプルを実行すると、p要素のbackground-colorプロパティにyellowが、font-weightプロパティにboldが、colorプロパティにredが設定されます。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキストテキストテキストテキスト</p>
▼実行結果（実際のWebページ）
 |
|---|
■CSSの値の取得
CSSプロパティの値を取得するには、css() の括弧内にプロパティ名を記述します。
▼サンプルコード（スクリプト部分）
$("p").text( $("p").css("color") );
このサンプルは、p要素のcolorプロパティの値を取得し、text() を使ってp要素内にテキストとして書き込みます。なお、colorプロパティはブラウザーにより取得できる値の書式が異なるため、結果はrgb(0, 0, 0) もしくは #000000と表示されます。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキストテキストテキストテキスト</p>
▼実行結果（実際のWebページ）
<p>rgb(0, 0, 0)</p>
<p>#000000</p>
この連載の記事
- 最終回 実務で使えるjQueryプラグイン3選
- 第25回 制作現場で役立つjQueryプラグインの使い方
- 第24回 jQueryとAjaxで作るスムーズページング
- 第23回 jQuery＋CSSによるカルーセルパネルの作り方
- 第22回 jQueryでバリデーション付きメールフォームを作ろう
- 第21回 jQueryで自作するフローティングウィンドウ
- 第20回 jQueryによるLightbox風モーダルウィンドウの作り方
- 第19回 jQueryで作る多階層ドロップダウンメニュー
- 第18回 IE6対応！jQueryで透過PNGのロールオーバーを作る
- 第17回 jQueryでロールオーバー！プリロード対応版
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
