检索HTML元素的位置(X，Y)
检索HTML元素的位置(X，Y)
提问于 2009-01-14 09:35:03
我想知道如何在JavaScript中获取img和div等HTML元素的X和Y位置。
回答 23
Stack Overflow用户
发布于 2012-07-09 22:06:25
正确的方法是使用element.getBoundingClientRect()
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);Internet Explorer一直支持这一点，因为只要你可能关心它，它最终在CSSOM Views. All中被标准化，其他浏览器采用了a long time ago。
一些浏览器也会返回高度和宽度属性，尽管这不是标准的。如果您担心旧版浏览器的兼容性，请查看此答案的修订版，以了解优化的降级实现。
element.getBoundingClientRect()返回的值是相对于视口的。如果您需要它相对于另一个元素，只需从一个矩形中减去另一个：
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
alert('Element is ' + offset + ' vertical pixels from <body>');Stack Overflow用户
发布于 2009-01-14 10:04:46
这些库使用一些长度来获取元素的精确偏移量。
下面是一个简单的函数，它可以在我尝试过的每种情况下完成这项工作。
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left; Stack Overflow用户
发布于 2015-01-30 02:46:35
此函数返回元素相对于整个文档(页面)的位置：
function getOffset(el) {
const rect = el.getBoundingClientRect();
return {
left: rect.left + window.scrollX,
top: rect.top + window.scrollY
};
}使用这个，我们可以得到X位置：
getOffset(element).left..。或Y位置：
getOffset(element).top页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/442404
复制相关文章
相似问题
腾讯云开发者
