cssメソッド
メソッド css は要素のCSSスタイルを取得および
変更することを可能にします。
重要なのは、取得するのは「計算された値」
(computed style properties) であり、
CSSスタイルで指定された値とは異なる可能性がある
という点です。
構文
単一のプロパティを取得:
$(セレクタ).css(プロパティ);
複数のプロパティを取得。渡すパラメータは プロパティ名の配列:
$(セレクタ).css(['width', 'height', 'color']);
単一のプロパティを変更:
$(セレクタ).css(プロパティ, 新しい値);
複数のプロパティを変更。'キー: 値'のペアを持つ
オブジェクトとして渡します。プロパティ名は
CamelCase 形式で指定します:
$(セレクタ).css({fontSize: '12px', color: 'red'});
あるいは、代替案:
<p class="www">text</p>
$('.www').css({'font-size':'12px', 'color':'red'});
指定した関数をセット内の各要素に適用することも
できます。この場合、関数の最初のパラメータは
セット内の要素のインデックス、2番目のパラメータは
その特定の要素の指定されたCSSプロパティの
現在の値を受け取ります。このとき、関数内の
this は現在の要素を指します。
各要素のCSSプロパティは、その要素に対して
関数が返す値に変更されます:
$(セレクタ).css(プロパティ名, function(セット内のインデックス, CSSプロパティの現在の値));
例
www クラスを持つすべての要素を取得し、
その色を赤に変更しましょう:
<p class="www">text</p>
$('.www').css('color', 'red');
例
www クラスを持つすべての要素を取得し、
色を赤に、フォントサイズを 20px に
変更しましょう:
<p class="www">text</p>
$('.www').css({color:'red', fontSize:'20px'});
あるいは、代替案:
<p class="www">text</p>
$('.www').css({'color':'red', 'font-size':'20px'});
