检索HTML元素的位置（X，Y）

由于不同的浏览器以不同的方式呈现边框，内边距，边距等。我编写了一个小函数来检索要精确定位的每个根元素中特定元素的顶部和左侧位置：

function getTop(root, offset) {
    var rootRect = root.getBoundingClientRect();
    var offsetRect = offset.getBoundingClientRect();
    return offsetRect.top - rootRect.top;
}

要获取左侧位置，您必须返回：

    return offsetRect.left - rootRect.left;

要获取元素的总偏移量，您可以递归求和所有父偏移量：

function getParentOffsets(el): number {
if (el.offsetParent) {
    return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
    return 0;
}
}

使用此实用程序功能，dom元素的总顶部偏移为：

el.offsetTop + getParentOffsets(el);

/**
 *
 * @param {HTMLElement} el
 * @return {{top: number, left: number}}
 */
function getDocumentOffsetPosition(el) {
    var position = {
        top: el.offsetTop,
        left: el.offsetLeft
    };
    if (el.offsetParent) {
        var parentPosition = getDocumentOffsetPosition(el.offsetParent);
        position.top += parentPosition.top;
        position.left += parentPosition.left;
    }
    return position;
}

感谢ThinkingStiff的答案，这是它只是另一个版本。

这是我设法创建的最佳代码（与jQuery的offset（）不同，它也可以在iframe中使用）。似乎webkit有一些不同的行为。

根据meouw的评论：

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        // chrome/safari
        if ($.browser.webkit) {
            el = el.parentNode;
        } else {
            // firefox/IE
            el = el.offsetParent;
        }
    }
    return { top: _y, left: _x };
}

我发现的最干净的方法是jQuery的技术的简化版本offset。类似于其他答案的开头getBoundingClientRect; 然后使用window和documentElement来调整滚动位置以及上的边距body（通常是默认值）之类的内容。

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

var els = document.getElementsByTagName("div");
var docEl = document.documentElement;

for (var i = 0; i < els.length; i++) {

  var rect = els[i].getBoundingClientRect();

  var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
  var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

  els[i].innerHTML = "<b>" + rectLeft + ", " + rectTop + "</b>";
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
}
#rel {
  position: relative;
  left: 10px;
  top: 10px;
}
#abs {
  position: absolute;
  top: 250px;
  left: 250px;
}

<div id="rel"></div>
<div id="abs"></div>
<div></div>

小与小的区别

function getPosition( el ) {
    var x = 0;
    var y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
    }
    return { top: y, left: x };
}

看一个坐标示例：http : //javascript.info/tutorial/coordinates

如果使用jQuery，则Dimensions插件非常出色，可让您准确指定所需的内容。

例如

相对位置，绝对位置，不带填充的绝对位置，带填充...

它还在继续，让我们说您可以做很多事情。

加上使用jQuery的好处是它的文件大小轻巧且易于使用，如果没有它，您将不会再使用JavaScript。

如果您使用的是jQuery，这可能是一个简单的解决方案：

<script>
  var el = $("#element");
  var position = el.position();
  console.log( "left: " + position.left + ", top: " + position.top );
</script>

jQuery .offset（）将获取第一个元素的当前坐标，或设置匹配元素集中相对于文档的每个元素的坐标。

如果页面至少包含“ DIV”，则meouw给出的函数将“ Y”值超出当前页面限制。为了找到确切的位置，您需要同时处理offsetParent和parentNode。

尝试下面给出的代码（已检查FF2）：

var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};

大多数浏览器上的HTML元素将具有：-

offsetLeft
offsetTop

这些参数指定元素相对于具有布局的最近父元素的位置。通常可以通过offsetParent属性访问此父级。

IE和FF3有

clientLeft
clientTop

这些属性不太常见，它们在其父级客户区中指定元素位置（填充区是客户区的一部分，而边界和边距则不是）。

这为我工作（从投票最高的答案修改而来）：

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

使用这个我们可以打电话

getOffset(element).left

要么

getOffset(element).top