jquery の offset() メソッドの js 実装 example_javascript スキル

この記事の例では、js が jquery の offset() メソッドを実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

jQuery の offset() を使用したことのある生徒は、offset().top または offset().left を使用すると、ページ全体に対する要素のオフセットを簡単に取得できることを知っています。

js には、そのような直接的なメソッドはありません。ノードの属性 offsetTop は、親ノードを基準としたノードの相対オフセットを取得できますが、ノードを使用してレイヤーごとに上向きに再帰的に取得することはできません。それらを加算して絶対オフセットを取得します。

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

function getOffset(Node, offset) {
If (!offset) {
オフセット = {};
Offset.top = 0;
Offset.left = 0;
}

if (Node == document.body) {//ノードがボディノードの場合、再帰を終了します
オフセットを返します;
}

offset.top = Node.offsetTop;
Offset.left = Node.offsetLeft;

return getOffset(Node.parentNode, offset) // オフセットの値を上方向に累積します
}

を使用する場合は次のようになります:

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

var a = document.getElementById('a');
//getOffset(a).top
//getOffset(a).left

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。