ホームページ > 記事 > ウェブフロントエンド > page_javascript スキルで要素のオフセットを取得するための js メソッドの概要
js を使用してエフェクトを作成する場合、多くの場合、ページ上の要素のオフセットを取得する必要があります (ヒント プロンプト ボックス機能など)。オフセットを取得するには、ドキュメントに対する相対的なオフセットを直接取得することも、ビューポート (視点) に対する相対的なオフセットにページのスクロール量 (スクロール) を加えたものを取得することもできます。
1. ドキュメントに対する相対的なオフセットを取得します
function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetParent; } return { top:top, left:left } }
offsetParent を上向きに反復することで、ドキュメントに対する相対的なオフセット、つまりページに対する相対的なオフセットを計算できます。
この方法の問題点:
1) テーブル レイアウトとインライン フレーム レイアウトを使用するページの場合、ブラウザごとに要素の実装方法が異なるため、得られる結果は不正確になります。
2) offsetParent を一度に 1 レベルずつ検索する必要があると、効率が低すぎます。
2. ビューポート (視点) とページのスクロール量 (スクロール) を基準としたオフセットを取得します
function getOffsetRect(ele){ var box=ele.getBoundingClientRect(); var body=document.body, docElem=document.documentElement; //获取页面的scrollTop,scrollLeft(兼容性写法) var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop, scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft; var clientTop=docElem.clientTop||body.clientTop, clientLeft=docElem.clientLeft||body.clientLeft; var top=box.top+scrollTop-clientTop, left=box.left+scrollLeft-clientLeft; return { //Math.round 兼容火狐浏览器bug top:Math.round(top), left:Math.round(left) } }
このメソッドは、getBoundingClientRect() メソッドを通じてビューポートに対する相対的なオフセットを直接取得し、ページのスクロール量に加えて clientTop、clientLeft を差し引いた値を取得します (IE8 以前のブラウザは開始点の座標として (2,2) を使用します。他のブラウザでは、開始点の座標として (0,0) を使用するため、値から開始点の座標を減算する必要があります。
getBoundingClientRect() メソッドは、IE、ff3、safari4、Orear9,5、Chrome をサポートします。
3. 互換性の書き込み
//获取元素相对于页面的偏移 function getOffset(ele){ if(ele.getBoundingClientRect){ return getOffsetRect(ele); }else{ return getOffsetSum(ele); } }
getBoundingClientRect() メソッドをサポートするブラウザの場合は getOffsetRect() メソッドを使用し、サポートしないブラウザの場合は getOffsetSum() メソッドを使用します。
以上がこの記事の全内容です。JavaScript を学習する皆さんのお役に立てれば幸いです。