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

javascript dom html css position

2022-08-29 21:53:51

我想知道如何获得HTML元素的X和Y位置，例如JavaScript中的和。imgdiv

答案 1

正确的方法是使用 element.getBoundingClientRect（）：

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

Internet Explorer一直支持这一点，只要你可能关心，它最终在CSSOM视图中标准化。所有其他浏览器很久以前就采用了它。

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

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

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

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

答案 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

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

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