jQueryのcss()メソッドの使用例example_jquery

この記事の例では、jQuery の css() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

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

文法構造:

文法 1:
指定されたスタイル属性の属性値を取得します。
スタイル属性名をパラメータとして受け取ります。例:

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

$("div").css("color")

上記のコードはdivのフォントカラー値を取得できます。
コード例:

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

<頭>





<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("ボタン").click(function(){
alert($("div").css("color"));
})
})

スクリプト ホーム

クリックして効果を確認してください

ここのボタンをクリックすると、div に設定されているフォントの色の値がポップアップ表示されます。

文法 2:

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

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

$("div").css("color","re​​d ")

上記のコードでは、すべての div のフォントの色を赤に設定できます。属性名と属性値はバンクで囲み、カンマで区切る必要があります。属性値が数値の場合は、次のように引用符を削除できます。

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

$("div").css("font-size", 20)

コード例:

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

<頭>





<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("ボタン").click(function(){
$("div").css("color","re​​d");
$("div").css("font-size",20);
})
})

変更を注意深く確認してください

変更を注意深く確認してください

クリックして効果を確認してください

上記のコードでは、ボタンをクリックすると、div 内のテキストの色を赤に設定できます。

文法 3:

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

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

$("div").css({color:"red" })

上記のコードは、すべての div 要素のフォントの色を赤に設定できます。 「属性名/値」オブジェクト メソッドを使用して、要素に一致する複数の属性セットを一度に設定することもできます。例:

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

$("div").css({color:"red" ,fontSize: 20})

上記のコードでは、div 内のフォントの色とサイズをそれぞれ赤と 20px に設定できます。単位を指定せずにフォント サイズを設定する場合、デフォルトの単位は px です。このとき、属性名を引用符で囲むことはできず、属性値を引用符で囲む必要がありますが、属性値が数値の場合は引用符を省略できます。 。 font-size やbackground-color などの属性名では中央の水平バー (-) を削除し、2 番目の単語の最初の文字を大文字にする必要があることに特に注意する必要があります。は fontSize として、background-color は backgroundColor として記述する必要があります。

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

<頭>





<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("ボタン").click(function(){
$("div").css({color:"red",fontSize:20,backgroundColor:"blue"});
})
});

変更を注意深く確認してください

変更を注意深く確認してください

クリックして効果を確認してください

上記のコードでは、ボタンをクリックすると、div 内のテキストの色とフォント サイズを変更できます。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。