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

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

WBOY

リリース： 2016-05-16 16:29:48

オリジナル

1153 人が閲覧しました

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","red") //すべての段落のフォントを赤に設定します

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 のスタイル、位置、サイズに関する全体的な内容です。漏れや間違いがあれば、お知らせください。 