jQuery css() メソッド

jQuery HTML/CSS Methods jQuery HTML/CSS Methods

全 <p> 要素に color プロパティを設定する:

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

Try it yourself »

定義と用法

css() メソッドは、選択した要素の1つ以上の style プロパティを設定または返します。

プロパティを返すために使用する場合:
このメソッドは、最初にマッチした要素の指定した CSS プロパティの値を返します。 しかし、("background" や "border" のような)ショートハンド CSS プロパティは 完全にサポートされていないので、ブラウザにより異なった結果が生じる可能性があります。

プロパティを設定するために使用する場合:
このメソッドは、マッチした全ての要素の指定した CSS プロパティの値を設定します。


構文

CSS プロパティ値を返す:

$(selector).css(property)

CSS プロパティ値を設定する:

$(selector).css(property,value)

関数を使って CSS プロパティと値を設定する:

$(selector).css(property,function(index,currentvalue))

複数のプロパティと値を設定する:

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

Parameter Description
property Specifies the CSS property name, like "color", "font-weight", etc.
value Specifies the value of the CSS property, like "red", "bold", etc.
function(index,currentvalue) Specifies a function that returns the new value for the CSS property
  • index - 集合内の要素のインデックス位置を返す
  • currentvalue - Returns the current value of the CSS property


Examples

Try it Yourself - 例

Return CSS property value
Return the specified CSS property value of the FIRST matched element.

Set CSS property and value using a function
Using a function to change a CSS property for the selected elements.

Set multiple CSS properties and value pairs
How to set multiple CSS properties and values for the selected elements.


jQuery HTML/CSS Methods jQuery HTML/CSS Methods