我想知道如何在JavaScript中获取img和div等HTML元素的X和Y位置。
当前回答
获取div相对于左侧和顶部的位置
var elm = $('#div_id'); //get the div
var posY_top = elm.offset().top; //get the position from top
var posX_left = elm.offset().left; //get the position from left
其他回答
使用JavaScript框架可能会更好地为您服务，该框架具有以独立于浏览器的方式返回此类信息（以及更多信息！）的功能。以下是一些：
原型jQuery框架YUI（雅虎）
使用这些框架，您可以执行以下操作：$（'id-of-img'）.top以获得图像的y像素坐标。
正确的方法是使用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>');
这是一个使用vanilla JS递归迭代element.offsetTop和element.ooffsetParent的现代1行代码：
功能：
getTop = el => el.offsetTop + (el.offsetParent && getTop(el.offsetParent))
用法：
const el = document.querySelector('#div_id');
const elTop = getTop(el)
优势：
无论当前滚动位置如何，始终返回绝对垂直偏移。
传统语法：
function getTop(el) {
return el.offsetTop + (el.offsetParent && getTop(el.offsetParent));
}
如果您使用jQuery，这可能是一个简单的解决方案：
<script>
var el = $("#element");
var position = el.position();
console.log( "left: " + position.left + ", top: " + position.top );
</script>
我想我也会把这个扔出去。我还不能在旧版浏览器中测试它，但它在前3名中的最新版本中运行。：）
Element.prototype.getOffsetTop = function() {
return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop;
};
Element.prototype.getOffsetLeft = function() {
return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft;
};
Element.prototype.getOffset = function() {
return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()};
};
