jQuery CSS 操作 - css() メソッド

jQuery CSS 操作リファレンスマニュアル

例

<p>要素の色を設定します：

$(".btn1").click(function(){
  $("p").css("color","red");
});

自分で試してみてください

定義と使用法

css() メソッドは、一致する要素の1つまたは複数のスタイル属性を設定または取得します。

CSS 属性値を返します

最初に一致する要素の CSS 属性値を返します。

注釈：値を返す場合、省略形の CSS 属性（例えば "background" または "border"）はサポートしていません。

$(selector).css(name)
パラメータ 説明
name 必須です。CSS 属性の名前を指定します。このパラメータには、どんな CSS 属性も含まれます。例えば "color"。

例

最初の段落の color スタイル属性の値を取得します：

$("p").css("color");

自分で試してみてください

CSS 属性の設定

すべての一致する要素の指定されたCSS属性を設定します。

$(selector).css(name,value)
パラメータ 説明
name 必須。CSS属性の名前を規定します。このパラメータには、"color"などの任意のCSS属性を含むことができます。
value

オプション。CSS属性の値を規定します。このパラメータには、"red"などの任意のCSS属性値を含むことができます。

空の文字列値が設定された場合、指定された属性は要素から削除されます。

例

すべての段落の色を赤に設定する：

$("p").css("color","red");

自分で試してみてください

関数を使用してCSS属性を設定する

すべての一致する要素のスタイル属性の値を設定します。

この関数は設定する属性値を返します。2つのパラメータを受け取ります、indexは要素がオブジェクトコレクション内のインデックス位置であり、valueは元の属性値です。

$(selector).css(name,function(index,value))
パラメータ 説明
name 必須。CSS属性の名前を規定します。このパラメータには、"color"などの任意のCSS属性を含むことができます。
function(index,value)

新しいCSS属性の値を定義する関数を規定します。

  • index - オプション。選択子のインデックス位置を受け入れます
  • oldvalue - オプション。CSS属性の現在の値を受け入れます。

例 1

すべての段落の色を赤に設定する：

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

自分で試してみてください

例 2

divの幅を徐々に増加させる：

$("div").click(function() {
  $(this).css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

自分で試してみてください

複数の CSS 属性/値ペアを設定する

$(selector).css({property:value, property:value, ...})

「名/値」オブジェクトをすべての一致する要素のスタイル属性として設定します。

これはすべての一致する要素に大量のスタイル属性を設定する最適な方法です。

パラメータ 説明
{property:value}

必須。設定するスタイル属性の「名称/値」オブジェクトを定義します。

このパラメータには、いくつかの CSS 属性名/値のペアを含むことができます。例えば {"color":"red","font-weight":"bold"}

例

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

自分で試してみてください

jQuery CSS 操作リファレンスマニュアル