Question

检索 HTML 元素的位置 (X,Y)

2009-01-14

2414287

javascript html css dom position

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

Answer 1

正确的方法是使用 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>');

Answer 2

此函数返回元素相对于整个文档（页面）的位置：

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

使用此函数我们可以获取 X 位置：

getOffset(element).left

... 或 Y 位置：

getOffset(element).top

Answer 3

这些库会不遗余力地获取元素的准确偏移量。
这里有一个简单的函数，在我尝试过的每种情况下都可以完成这项工作。

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;