Jquery_jqueryのoffset()とposition()の違いの分析-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Jquery_jqueryのoffset()とposition()の違いの分析

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:15 PM

jquery offset position 違い

この記事では、Jquery の offset() とposition() の違いを例を通して分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. Jquery の offset()

現在のビューポート内の一致する要素の相対オフセットを取得します。位置は、要素の親要素または祖先要素の位置属性に関係なく、常にドキュメントを基準にして計算されます。
返されたオブジェクトには、top と left という 2 つの整数プロパティが含まれます。このメソッドは、表示されている要素に対してのみ機能します。

例:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { margin-left:10px; } 
</style> 
<script src="js/jquery.js"></script> 
</head> 
<body> 
 <p>Hello</p><p>2nd Paragraph</p> 
<script>
var p = $("p:last"); 
var offset = p.offset(); 
p.html( "left: " + offset.left + ", top: " + offset.top );
</script> 
</body> 
</html>

ログイン後にコピー

2. Jquery のposition()

親要素を基準とした一致する要素のオフセットを取得します。より一般的には、position:relative を含む要素の最も近い親要素または祖先要素の位置です。そのような親要素または祖先要素が見つからない場合、位置はドキュメント (つまり、ビューポートの左上隅) を基準にして計算されます。返されるオブジェクトには、top と left という 2 つの整数プロパティが含まれます。正確に計算するには、フィラー、境界線、および塗りつぶしのプロパティにピクセル単位を使用します。

例:

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
 div { padding: 15px;} 
 p { margin-left:10px; } 
 </style> 
 <script src="jquery脚本URL"></script> 
</head> 
<body> 
<div> 
 <p>Hello</p> 
</div> 
<p></p> 
<script> 
var p = $("p:first"); 
var position = p.position(); 
$("p:last").text( "left: " + position.left + ", top: " + position.top ); 
</script> 
</body> 
</html>

ログイン後にコピー

3. offset() とposition() の違い

1. offset() メソッドは、現在のウィンドウ内の一致する要素の相対オフセットを取得します。ここでのウィンドウとは、ブラウザのメニューバーなどを除いた、現在のページのウィンドウを指します。もちろん、ブラウザ全体を制御するために jquery を使用する必要はありません。制御したいのはページウィンドウです。

2.position() メソッドは、親要素を基準とした一致する要素のオフセットを取得します。つまり、絶対配置または相対配置による、最も近い親要素に対する要素のオフセットが取得されます。すべての親要素がデフォルトの静的位置決めモードにある場合、処理方法は現在のウィンドウのオフセットである offset() と同じです。

3.position() メソッドを使用する場合、すべての親要素がデフォルトの位置決め (静的) モードにある場合、処理メソッドは現在のウィンドウの相対オフセットである offset() と同じになります。 >

4. offset() メソッドを使用すると、要素の位置やその親要素の位置に関係なく、現在のビューポートを基準とした要素のオフセットが取得されます。

5. 通常の状況では、表示される要素 B が要素 A の同じ親要素の下に格納されている場合 (つまり、B が A の兄弟ノードである場合)、この時点でposition() を使用するのが最も適切です。表示される要素 B が DOM の先頭または末尾に格納されている場合 (つまり、その親要素がボディである場合)。現時点では、offset() を使用するのが最善です。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7722

Java チュートリアル

1642

CakePHP チュートリアル

1396

Laravel チュートリアル

1289

PHP チュートリアル

1233

Related knowledge

C言語関数の基本的な要件は何ですか Apr 03, 2025 pm 10:06 PM

C言語関数は、コードモジュール化とプログラム構築の基礎です。それらは、宣言（関数ヘッダー）と定義（関数体）で構成されています。 C言語は値を使用してパラメーターをデフォルトで渡しますが、外部変数はアドレスパスを使用して変更することもできます。関数は返品値を持つか、または持たない場合があり、返品値のタイプは宣言と一致する必要があります。機能の命名は、ラクダを使用するか、命名法を強調して、明確で理解しやすい必要があります。単一の責任の原則に従い、機能をシンプルに保ち、メンテナビリティと読みやすさを向上させます。

PSのエクスポートPDFのパスワード保護を設定する方法 Apr 06, 2025 pm 04:45 PM

Photoshopでパスワードで保護されたPDFをエクスポート：画像ファイルを開きます。 [ファイル]＆gtをクリックします。「エクスポート」＆gt; 「PDFとしてのエクスポート」。「セキュリティ」オプションを設定し、同じパスワードを2回入力します。 [エクスポート]をクリックして、PDFファイルを生成します。

H5とミニプログラムとアプリの違い Apr 06, 2025 am 10:42 AM

H5。ミニプログラムとアプリの主な違いは次のとおりです。技術アーキテクチャ：H5はWebテクノロジーに基づいており、ミニプログラムとアプリは独立したアプリケーションです。経験と機能：H5は軽量で使いやすく、機能が限られています。ミニプログラムは軽量で、インタラクティブが良好です。アプリは強力で、スムーズな経験があります。互換性：H5はクロスプラットフォーム互換性があり、アプレットとアプリはプラットフォームによって制限されています。開発コスト：H5には、開発コストが低く、中程度のミニプログラム、最高のアプリがあります。適用可能なシナリオ：H5は情報表示に適しており、アプレットは軽量アプリケーションに適しており、アプリは複雑な機能に適しています。

C言語関数の概念 Apr 03, 2025 pm 10:09 PM

C言語関数は再利用可能なコードブロックです。彼らは入力を受け取り、操作を実行し、結果を返すことができます。これにより、再利用性が改善され、複雑さが軽減されます。関数の内部メカニズムには、パラメーターの渡し、関数の実行、および戻り値が含まれます。プロセス全体には、関数インラインなどの最適化が含まれます。単一の責任、少数のパラメーター、命名仕様、エラー処理の原則に従って、優れた関数が書かれています。関数と組み合わせたポインターは、外部変数値の変更など、より強力な関数を実現できます。関数ポインターは機能をパラメーターまたはストアアドレスとして渡し、機能への動的呼び出しを実装するために使用されます。機能機能とテクニックを理解することは、効率的で保守可能で、理解しやすいCプログラムを書くための鍵です。

Routerフォルダーの下のindex.jsファイルでvue.use（vuerouter）を呼び出す必要があるのはなぜですか？ Apr 05, 2025 pm 01:03 PM

Vueアプリケーションを開発するときに、ルーターフォルダーの下にindex.jsファイルにvuerouterを登録する必要性があるため、ルーティング構成で問題が発生することがよくあります。特別...

CとC＃の違いと接続は何ですか？ Apr 03, 2025 pm 10:36 PM

CとC＃には類似点がありますが、それらは完全に異なります。Cはプロセス指向の手動メモリ管理、およびシステムプログラミングに使用されるプラットフォーム依存言語です。 C＃は、デスクトップ、Webアプリケーション、ゲーム開発に使用されるオブジェクト指向のガベージコレクション、およびプラットフォーム非依存言語です。

XPathを使用して、JavaScriptの指定されたDOMノードから検索する方法は？ Apr 04, 2025 pm 11:15 PM

JavaScriptのDOMノードの下でのXpath検索方法の詳細な説明、XPath式に基づいてDOMツリーから特定のノードを見つける必要があることがよくあります。あなたがする必要があるなら...

H5とMINIプログラムを宣伝するさまざまな方法は何ですか？ Apr 06, 2025 am 11:03 AM

H5とMINIプログラムのプロモーション方法には違いがあります。プラットフォーム依存：H5はブラウザに依存し、MINIプログラムは特定のプラットフォーム（WeChatなど）に依存しています。ユーザーエクスペリエンス：H5エクスペリエンスは貧弱で、ミニプログラムはネイティブアプリケーションと同様のスムーズな体験を提供します。通信方法：H5はリンクを介して広がり、ミニプログラムはプラットフォームで共有または検索されます。 H5プロモーション方法：ソーシャル共有、電子メールマーケティング、QRコード、SEO、有料広告。ミニプログラムプロモーション方法：プラットフォームプロモーション、ソーシャル共有、オフラインプロモーション、ASO、他のプラットフォームとの協力。

See all articles