如何使用JavaScript获取HTML元素的x、y位置

Question

我在我的HTML文档中有几个带有特定CSS类的

元素，并且想要获取这些元素的x、y位置，谢谢。

- Nudier Mena

---

相对于什么获取x，y位置？文档/窗口还是其父级？ - Ian

获取文档中的x，y位置。 - Nudier Mena

Answer 1

使用getBoundingClientRect函数：

http://ejohn.org/blog/getboundingclientrect-is-awesome/

例如：

var div = document.getElementById("yourDiv");
var rect = div.getBoundingClientRect();
alert("Coordinates: " + rect.left + "px, " + rect.top + "px");

请记住，getBoundingClientRect返回的是相对于当前视口的坐标，这意味着如果你想知道相对于document.body的坐标，你需要添加水平和垂直滚动量(document.documentElement.scrollLeft或者document.body.scrollLeft适用于Firefox，当然还有.scrollTop)。

- MaxArt

Answer 2

如果我理解正确，您想要做到这一点 http://www.quirksmode.org/js/findpos.html

- jakubiszon

---

啊，是的。如果你想支持老客户端，这是一篇不错的阅读材料。不过那个页面需要更新了。 - MaxArt

真的吗？你能解释一下缺少什么吗？ - jakubiszon

正如我在我的回答中所指出的，getBoundingClientRect是一个很好的工具，并且被所有主流浏览器支持。它真的可以简化操作。并不是说旧的quirksmode.org代码不再起作用了...只是它更慢一些。 - MaxArt

如果我要编写一个跨浏览器的标准化库，假设 Rect 不可用，那么这个解决方案就是我会使用的方案。 - Erik Reppen

Answer 3

以下示例展示如何检索 HTML 元素的 ClientRect。

# first tag link of this page
document.getElementsByClassName('post-taglist')[0].children[0].getClientRects()[0]
# question div
document.getElementById('question').getClientRects()[0]

使用它，您可以访问右侧、顶部、高度、宽度、左侧和底部属性。

- Flavio Cysne

---

“getClientRects” 太过繁琐，您不需要知道那么多。获取所有矩形的主要原因是如果您想要了解文本行的位置和大小。 - MaxArt

NM。我错过了MaxArt在其他地方写的内容。 - Erik Reppen