CSS のスタイル、位置、サイズを操作するための jquery メソッドのまとめ_jquery

1. CSS

1. css(名前)

最初に一致した要素の style 属性にアクセスします。
戻り値 文字列
パラメータ
name (文字列): アクセスする属性の名前
例:

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

$("p").css("color"); //最初の段落のカラースタイル属性の値を取得します

2. css(プロパティ)

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

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

//1 すべての段落のフォントの色を赤に、背景を青に設定します
$("p").css({ 色: "#ff0011"、背景: "青" }); //2 属性名に「-」が含まれる場合は、引用符
を使用する必要があります $("p").css({ "margin-left": "10px", "background-color": "blue" });

3. css(名前,値)

一致するすべての要素にスタイル属性の値を設定します。数値は自動的にピクセル値に変換されます

戻り値 jQuery

パラメータ

名前 (値): 属性名

value (文字列、数値): 属性値

例:

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

$("p").css("color","re​​d") //すべての段落のフォントを赤に設定します

2. 場所

1. オフセット()

現在のビュー ウィンドウ内の一致する要素の相対オフセットを取得します。返されたオブジェクトには、top と left という 2 つの整数プロパティが含まれます。

注: このメソッドは、表示されている要素に対してのみ機能します。

戻り値 オブジェクト{top,left}
例:

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

/*

// 2 番目のセグメントのオフセットを取得します
文書の断片:

こんにちは

第2段落

*/
var p = $("p:last"); var offset = p.offset(); p.html("left: " offset.left ", top: " offset.top);



2. 位置()

親要素を基準とした一致する要素のオフセットを取得します。 返されたオブジェクトには、top と left という 2 つの整数プロパティが含まれます。正確に計算するには、フィラー、境界線、および塗りつぶしのプロパティにピクセル単位を使用します。このメソッドは、表示されている要素に対してのみ機能します。

戻り値 オブジェクト{top,left} 例:

コードをコピー

コードは次のとおりです: /* //最初の段落のオフセットを取得します 文書の断片:

こんにちは

第2段落

*/ var p = $("p:first"); var 位置 = p.position(); $("p:last").html("left: "position.left", top:"position.top);

3.scrollTop()


スクロール バーの上部を基準とした、一致した要素のオフセットを取得します。
注: この方法は、表示されている要素と非表示の要素の両方に機能します。
戻り値 整数
例:

コードをコピー

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


/*

//スクロールバーの上部を基準とした最初のセグメントのオフセットを取得します 文書の断片:

こんにちは

第2段落

*/ var p = $("p:first"); $("p:last").text("scrollTop:" p.scrollTop()); 4. スクロールトップ(val)

パラメータ値を渡すとき、スクロールバーの上部オフセットをこの値に設定します。この方法は、表示要素と非表示要素の両方に機能します。
戻り値 jQuery
例:

コードをコピー

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

$("div.demo").scrollTop(300);

5.scrollLeft()

スクロール バーの左側を基準とした、一致した要素のオフセットを取得します。この方法は、表示要素と非表示要素の両方に機能します。
戻り値 整数
例:

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

/*
//スクロールバーの左側を基準とした最初のセグメントのオフセットを取得します
文書の断片:

こんにちは

第2段落

*/
var p = $("p:first"); $("p:last").text("scrollLeft:" p.scrollLeft());

6.scrollLeft(val)

パラメータ値を渡すとき、スクロールバーの左オフセットをこの値に設定します。この方法は、表示要素と非表示要素の両方に機能します。 戻り値 jQuery

例:

コードをコピー コードは次のとおりです: $("div.demo").scrollLeft(300);

3. サイズ

1.身長()

最初に一致した要素の現在計算された高さの値 (px) を取得します。 jQuery 1.2以降では、ウィンドウとドキュメントの高さを取得するために使用できます
戻り値 整数 例:

コードをコピー

コードは次のとおりです: /* //最初の段落の高さを取得します

文書の断片:

こんにちは

第2段落

*/

アラート($("p").height()); //ドキュメントの高さを取得します
アラート($(ドキュメント).高さ());



2. 身長(値)


一致した各要素の CSS 高さ (hidth) プロパティの値を設定します。単位が明示的に指定されていない場合 (例: em または %)、px が使用されます。単位が明示的に指定されていない場合 (例: em または %)、px が使用されます。

戻り値 jQuery パラメータ

val (文字列, 数値): CSS の「高さ」の値を設定します。 例:

コードをコピーします

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

/* //すべての段落の高さを 20 に設定します 文書の断片:

こんにちは

第2段落

*/ $("p").height(20); アラート($("p").height());

3.幅()


最初に一致した要素の現在計算された幅の値 (px) を取得します。 jQuery 1.2以降では、ウィンドウとドキュメントの幅を取得するために使用できます
戻り値 整数
例: 0

コードをコピー

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


/*

//最初の段落の幅を取得します 文書の断片:

こんにちは

第2段落

*/ アラート($("p").width()); 4.幅(値)

一致した各要素の CSS width プロパティの値を設定します。単位が明示的に指定されていない場合 (例: em または %)、px が使用されます。
戻り値 jQuery
パラメータ
val (文字列, 数値): CSS の「width」プロパティ値を設定します
例:

コードをコピー

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


/*
//すべての段落の幅を 20 に設定します
文書の断片:

こんにちは

第2段落

*/

$("p").width(20); アラート($("p").width()); 5. innerHeight()

最初に一致した要素の内部領域の高さを取得します (パディングを含み、境界線を除きます)。この方法は、表示要素と非表示要素の両方に機能します。

戻り値 整数
例:




コードをコピー

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

/*

//最初の段落の内部領域の高さを取得

文書の断片:

こんにちは

第2段落

*/
var p = $("p:first"); $("p:last").text("innerHeight:" p.innerHeight());

7. innerWidth()

最初に一致した要素の内部領域の幅を取得します (パディングを含み、境界線を除きます)。この方法は、表示要素と非表示要素の両方に機能します。
戻り値 整数
例:

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

/*
//最初の段落の内部領域の幅を取得
文書の断片:

こんにちは

第2段落

*/
var p = $("p:first"); $("p:last").text("innerWidth:" p.innerWidth());

7. 外側の高さ(オプション)

最初に一致した要素の外側の高さを取得します (デフォルトではパディングとボーダーが含まれます)。この方法は、表示要素と非表示要素の両方に機能します。 戻り値 整数

パラメータ

options(Boolean): (false) true に設定すると、計算にマージンが含まれます。
例:

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

//最初の段落の外側の高さを取得します

文書の断片:

こんにちは

第2段落

*/
var p = $("p:first"); $("p:last").text("outerHeight:" p.outerHeight() " 、outerHeight(true):" p.outerHeight(true));



8. 外側の高さ(オプション)

最初に一致した要素の外側の幅を取得します (デフォルトではパディングとボーダーが含まれます)。この方法は、表示要素と非表示要素の両方に機能します。 戻り値 整数

パラメータ options(Boolean): (false) true に設定すると、計算にマージンが含まれます。 例:

コードをコピー

コードは次のとおりです: /* //最初の段落の外側の幅を取得します 文書の断片:

こんにちは

第2段落

*/ var p = $("p:first"); $("p:last").text("outerWidth:" p.outerWidth() " 、outerWidth(true):" p.outerWidth(true));

上記は jQuery の CSS のスタイル、位置、サイズに関する全体的な内容です。漏れや間違いがあれば、お知らせください。