如何使用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的坐标，则必须添加水平和垂直滚动量（Firefox的document.documentElement.scrollLeft或document.body.scrollLeft，当然还有.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]

有了它，你可以访问right，top，height，width，left和bottom属性。