如何在JavaScript中获取元素相对于浏览器窗口顶部和左侧的坐标？

9 浏览
0 Comments

如何在JavaScript中获取元素相对于浏览器窗口顶部和左侧的坐标？

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

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

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

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

0
0 Comments

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

0