javascript - 要素のドキュメントに対する位置を取得する

要素のドキュメント／ボディ／ブラウザウィンドウに対する位置を決定する最も簡単な方法は何ですか？

今、私は .offsetLeft/offsetTop を使っていますが、この方法は親要素に対する位置しか取得できないので、body 要素までにいくつの親があるかを確認して、body/ブラウザウィンドウ/ドキュメントに対する位置を知る必要があります。

この方法もまた面倒です。

回答 #1

このように DOM を辿らずに top と left を取得することができます:

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

回答 #2

要素の位置をビューポートに対して取得するには、element.getBoundingClientRect() を使用できます。

次に、document.documentElement.scrollTop を使用してビューポートのオフセットを計算します。

この2つの合計は、文書に対する要素の位置を示します:

element.getBoundingClientRect().top + document.documentElement.scrollTop

回答 #3

あなたは offsetParent を DOM の最上位レベルまでたどることができます。

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

回答 #4

offsetTop/offsetLeft で引っかかるエッジケースを扱うとき、私は次の方法が最も信頼できると感じています。

function getPosition(element) {
    var clientRect = element.getBoundingClientRect();
    return {left: clientRect.left + document.body.scrollLeft,
            top: clientRect.top + document.body.scrollTop};
}