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

我想知道如何在 JavaScript 中获取 HTML 元素的 X 和 Y 位置，例如img和div 。

答案

正确的方法是使用element.getBoundingClientRect() ：

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer 已经支持这个，因为只要你可能关心它，它最终在CSSOM Views 中被标准化。所有其他浏览器很久以前就采用了它。

某些浏览器还返回高度和宽度属性，但这不是标准的。如果您担心较旧的浏览器兼容性，请查看此答案的修订版，以获得优化的降级实现。

element.getBoundingClientRect()返回的值是相对于视口的。如果您需要它相对于另一个元素，只需从另一个元素中减去一个矩形：

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

这些库会花费一些时间来获得元素的准确偏移量。
这是一个简单的功能，可以在我尝试的每种情况下完成工作。

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;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

这对我有用（从最高投票答案修改）：

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

使用这个我们可以打电话

getOffset(element).left

要么

getOffset(element).top