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>
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。