Web制作の現場で使えるjQuery　UIデザイン入門 ― 第5回

サンプルで学ぶjQuery：(X)HTML/CSSを操作する (6/7)

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>