检索HTML元素的位置（X，Y）
我想知道如何在JavaScript中获取HTML元素（如img和div的X和Y位置。
正确的方法是使用element.getBoundingClientRect() ：
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
只要您可能关心，并且最终在CSSOM视图中标准化了，Internet Explorer就已经支持这一功能。 所有其他浏览器很久以前就采用了它。
某些浏览器也会返回高度和宽度属性，虽然这是非标准的。 如果您担心较旧的浏览器兼容性，请检查此答案的修订版以获得优化的降级实施。
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) {
el = el.getBoundingClientRect();
return {
left: el.left + window.scrollX,
top: el.top + window.scrollY
}
}
使用这个我们可以打电话
getOffset(element).left
要么
getOffset(element).top