jQuery の css() メソッドの使用ガイド_jquery

定義と使用法

css() メソッドは、一致した要素の 1 つ以上のスタイル属性を返すか、設定します。

CSS プロパティ値を返す

最初に一致した要素の CSS プロパティ値を返します。

注: 値を返すために使用される短縮形式の CSS プロパティ (「background」や「border」など) はサポートされません。

コードをコピーします コードは次のとおりです:

$(セレクター).css(名前)

名前は必須です。 CSS プロパティの名前を指定します。このパラメータには、任意の CSS プロパティを含めることができます。例えば「色」。

例
最初の段落のカラー スタイル属性の値を取得します:

コードをコピーします コードは次のとおりです:

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

CSS プロパティを設定します

一致するすべての要素に指定された CSS プロパティを設定します。

コードをコピーします コードは次のとおりです:

$(セレクター).css(名前,値)

名前は必須です。 CSS プロパティの名前を指定します。このパラメータには、「color」などの任意の CSS プロパティを含めることができます。

値はオプションです。 CSS プロパティの値を指定します。このパラメータには、「red」などの任意の CSS プロパティ値を含めることができます。

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

例
すべての段落の色を赤に設定します:

コードをコピーします コードは次のとおりです:

$("p").css("色","赤");

関数を使用して CSS プロパティを設定します

一致するすべての要素に style 属性の値を設定します。
この関数は、設定するプロパティ値を返します。 2 つのパラメータを受け入れます。index はオブジェクト コレクション内の要素のインデックス位置、value は元の属性値です。

コードをコピーします コードは次のとおりです:

$(セレクター).css(名前,関数(インデックス,値))

名前は必須です。 CSS プロパティの名前を指定します。このパラメータには、「color」などの任意の CSS プロパティを含めることができます。

コードをコピーします コードは次のとおりです:

関数(インデックス,値)

CSS プロパティの新しい値を返す関数を指定します。
インデックス - オプション。セレクターのインデックス位置を受け入れます
oldvalue - オプション。 CSS プロパティの現在の値を受け入れます。

例 1
すべての段落の色を赤に設定します:

コードをコピーします コードは次のとおりです:

$("ボタン").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 プロパティ/値のペアを設定します

コードをコピーします コードは次のとおりです:

$(セレクター).css({プロパティ:値, プロパティ:値, ...})

名前と値のペアのオブジェクトを、一致するすべての要素のスタイル属性として設定します。
これは、一致するすべての要素に多数のスタイル プロパティを設定する最良の方法です。

{プロパティ:値}
必須。スタイル属性として設定する名前と値のペアのオブジェクトを指定します。
このパラメータには、複数の CSS プロパティ名と値のペアを含めることができます。例: {"color":"red","font-weight":"bold"}

例

コードをコピー コードは次のとおりです:

$("p").css({
"色":"白",
"背景色":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"パディング":"5px"
});

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。