ホームページ > 記事 > ウェブフロントエンド > Jquery_jqueryのoffset()とposition()の違いの分析
Jquery_jqueryのoffset()とposition()の違いの分析
- WBOYオリジナル
- 2016-05-16 16:15:301176ブラウズ
この記事では、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 プログラミングに役立つことを願っています。