我想知道如何在 JavaScript 中获取 HTML 元素（例如img和 ）的 X 和 Y 位置div。
检索 HTML 元素的位置 (X,Y)
IT技术
javascript
html
css
dom
position
2021-02-02 21:07:12
6个回答
正确的方法是使用element.getBoundingClientRect()：
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
Internet Explorer 一直支持这一点，因为只要您可能关心它，它最终在CSSOM 视图中标准化。所有其他浏览器很久以前就采用了它。
一些浏览器还返回高度和宽度属性，尽管这是非标准的。如果您担心旧浏览器的兼容性，请查看此答案的修订版以获得优化的降级实现。
返回的值element.getBoundingClientRect()是相对于视口的。如果您需要相对于另一个元素，只需从另一个矩形中减去一个矩形：
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
alert('Element is ' + offset + ' vertical pixels from <body>');
这些库会竭尽全力获得元素的准确偏移量。
这是一个简单的函数，它可以在我尝试过的所有情况下完成工作。
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;
此函数返回元素相对于整个文档（页面）的位置：
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
如果您只想在 javascript 中完成，这里有一些 使用的衬垫getBoundingClientRect()
window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y
window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X
第一行将返回offsetTop相对于文档的 Y。第二行将返回offsetLeft说 X 相对于文档。
getBoundingClientRect() 是一个 javascript 函数，它返回元素相对于窗口视口的位置。
大多数浏览器上的 HTML 元素将具有：-
offsetLeft
offsetTop
这些指定元素相对于其最近的具有布局的父元素的位置。如果 offsetParent 属性，则通常可以访问此父级。
IE 和 FF3 有
clientLeft
clientTop
这些属性不太常见，它们指定元素位置及其父客户区（填充区域是客户区的一部分，但边框和边距不是）。
其它你可能感兴趣的问题