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

現在、私はを使用.offsetLeft/offsetTopしていますが、このメソッドは親要素に対する相対的な位置のみを提供するため、body /ブラウザウィンドウ/ドキュメントの位置に対する相対的な位置を知るには、body要素に対する親の数を決定する必要があります。

この方法も面倒です。

offsetParentDOMの最上位までトラバースできます。

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

次のようにDOMをトラバースすることなく、トップとレフトを取得できます。

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) };
}

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

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

2つの合計は、ドキュメントに対する要素の位置を示します。

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

私は使用をお勧めします

element.getBoundingClientRect()

ここで提案されている ように、offsetLeft、offsetTop、およびoffsetParentによる手動のオフセット計算の代わりに。ここ で提案されているとおり状況によっては*手動トラバーサルは無効な結果を生成します。このPlunkerを参照してください：http ://plnkr.co/pC8Kgj

*要素が静的（=デフォルト）の位置にあるスクロール可能な親の内部にある場合。

document-offset（サードパーティのスクリプト）は興味深いものであり、ここで他の回答からのアプローチを活用しているようです。

例：

var offset = require('document-offset')
var target = document.getElementById('target')
console.log(offset(target))
// => {top: 69, left: 108} 

次のメソッドは、offsetTop / offsetLeftをトリップするエッジケースを処理するときに最も信頼できることがわかりました。

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

ドキュメントを基準にした、要素のさまざまな位置のx座標とy座標を取得したい場合。

const getCoords = (element, position) => {
  const { top, left, width, height } = element.getBoundingClientRect();
  let point;
  switch (position) {
    case "top left":
      point = {
        x: left + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "center left":
      point = {
        x: left + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "bottom left":
      point = {
        x: left + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
  }
  return point;
};

使用法

• getCoords(document.querySelector('selector'), 'center')

• getCoords(document.querySelector('selector'), 'bottom right')

• getCoords(document.querySelector('selector'), 'top center')

jQueryを使用してもかまわない場合は、offset()関数を使用できます。この機能の詳細については、ドキュメントを参照してください。

http://www.quirksmode.org/js/findpos.htmlこれを行うための最良の方法を説明します。全体として、オフセットを見つけて親のツリーをたどる必要がある正しい軌道に乗っています。