javascript - 如何使用 javascript 获取 html 元素的 x、y 位置

Question

我在我的 html 文档中有几个具有某些 css 类的 div 元素，并且想要获取这些元素的 x、y 位置，在此先感谢。

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当然是）。

Answer 2

如果我理解，你想这样做http://www.quirksmode.org/js/findpos.html

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]

有了它，您可以访问右、上、高、宽、左和下属性。