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

小编典典

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

javascript

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

阅读 286

2022-02-13

共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>');

2022-02-13