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

我在我的html文档中找到了几个具有某些css类的div元素，并且希望获得这些元素的x，y位置，这要归功于提前。如何使用javascript获取html元素的x，y位置

2012-06-01 Nudier Mena

获取与什么相关的x，y位置？文件/窗口？或其父？ – Ian

获取文档中的x，y位置。 –

使用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，以及当然是210）。

来源

2012-06-01 16:00:26 MaxArt

如果我明白了，你想这样做http://www.quirksmode.org/js/findpos.html

来源

2012-06-01 16:08:13 Jakub

啊，是的。如果您想要支持较老的客户，请阅读好文章。但是，该页面需要更新。 – MaxArt

真的吗？你有什么机会可以解释那里失踪的？ – Jakub

正如我在我的回答中指出的那样，'getBoundingClientRect'是一个很好的工具，并且受所有主流浏览器的支持。它真的简化了事情。不是旧的quirksmode.org代码不再工作......它只是慢了点。 – MaxArt

例子波纹管展示了如何检索一个HTML元素

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

有了它，你必须查看在右，上，高度ClientRect，宽度，左侧和底部属性。

来源

2012-06-01 16:11:15

'getClientRects'太过分了，你不需要知道所有这些。获得所有反思的主要原因是如果你想知道文本行的位置和大小。 NM。 – MaxArt

NM。错过了MaxArt在别处写的东西。 –

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

回答

相关问题