我想知道如何在JavaScript中获取img和div等HTML元素的X和Y位置。
当前回答
这是我所创建的最好的代码（与jQuery的offset（）不同，也可以在iframes中使用）。看起来webkit有点不同的行为。
基于meouw的评论：
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;
// chrome/safari
if ($.browser.webkit) {
el = el.parentNode;
} else {
// firefox/IE
el = el.offsetParent;
}
}
return { top: _y, left: _x };
}
其他回答
我想我也会把这个扔出去。我还不能在旧版浏览器中测试它，但它在前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()};
};
要获得元素的总偏移量，可以递归地对所有父偏移量求和：
function getParentOffset(el): number {
if (el.offsetParent) {
return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
return 0;
}
}
使用该实用函数，dom元素的总顶部偏移量为：
el.offsetTop + getParentOffset(el);
获取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
正确的方法是使用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>');
这样怎么样，通过传递元素的ID，它将返回左侧或顶部，我们还可以组合它们：
1） 查找左侧
function findLeft(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return rec.left + window.scrollX;
} //call it like findLeft('#header');
2） 查找顶部
function findTop(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return rec.top + window.scrollY;
} //call it like findTop('#header');
或3）找到左侧和顶部
function findTopLeft(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');
