1. Web ページ要素の相対位置を取得する一般的な方法

絶対位置の場合は、ページのスクロールバーのスクロール距離から絶対座標を差し引くだけで相対位置を求めることが非常に簡単です。スクロールバーによってスクロールされる垂直方向の距離は、ドキュメントオブジェクトのscrollTop プロパティであり、スクロールバーによってスクロールされる水平方向の距離は、ドキュメントオブジェクトのscrollLeft プロパティです。

また、scrollTop 属性とscrollLeft 属性を割り当てると、Web ページが対応する位置にすぐに自動的にスクロールされるため、Web ページ要素の相対位置を変更するために使用できます。

さらに、element.scrollIntoView() メソッドにも同様の効果があり、Web ページ要素をブラウザウィンドウの左上隅に表示できます。

    // 获取left
    function getElementViewLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}

　　　　if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollLeft = document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft = document.documentElement.scrollLeft; 
　　　　}

　　　　return actualLeft - elementScrollLeft;
　　}

    // 获取top
    function getElementViewTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop += current. offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop = document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop = document.documentElement.scrollTop; 
　　　　}

　　　　return actualTop - elementScrollTop;
　　}

2. 要素の位置を取得する簡単な方法

getBoundingClientRect() メソッドを使用します。これは、ブラウザウィンドウ (ビューポート) の左上隅を基準とした要素の左上隅と右下隅の間の距離に対応する、left、right、top、bottom の 4 つのプロパティを含むオブジェクトを返します。

したがって、ページ要素の相対位置は次のようになります。

var X= this.getBoundingClientRect().left;

var Y =this.getBoundingClientRect().top;

スクロール距離に加えて、絶対位置を取得できます

var X= this.getBoundingClientRect().left + document.documentElement.scrollLeft;

var Y = this.getBoundingClientRect().top + document.documentElement.scrollTop;

現在、IE、Firefox 3.0 以降、および Opera 9.5 以降はすべてこの方法をサポートしていますが、Firefox 2.x、Safari、Chrome、および Konqueror はサポートしていません。

ページ全体(スクロールバーを含む)におけるラベル要素の相対位置を取得するメソッド

1. Web ページ要素の相対位置を取得する一般的な方法

2. 要素の位置を取得する簡単な方法

おすすめ