这是一个使用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));
}

由于不同的浏览器以不同的方式呈现边框、填充、边距等。我编写了一个小函数来检索每个根元素中特定元素的顶部和左侧位置，您需要精确的维度：

function getTop(root, offset) {
    var rootRect = root.getBoundingClientRect();
    var offsetRect = offset.getBoundingClientRect();
    return offsetRect.top - rootRect.top;
}

对于检索左侧位置，必须返回：

    return offsetRect.left - rootRect.left;

大多数浏览器上的HTML元素将具有：-

offsetLeft
offsetTop

它们指定元素相对于其最近的具有布局的父元素的位置。通常可以通过offsetParent属性访问此父级。

IE和FF3具有

clientLeft
clientTop

这些财产不太常见，它们使用其父工作区指定元素位置（填充区是工作区的一部分，但边界和边距不是）。

这很简单，在JS中有两行：

var elem = document.getElementById("id");    
alert(elem.getBoundingClientRect());

使用JavaScript框架可能会更好地为您服务，该框架具有以独立于浏览器的方式返回此类信息（以及更多信息！）的功能。以下是一些：

原型jQuery框架YUI（雅虎）

使用这些框架，您可以执行以下操作：$（'id-of-img'）.top以获得图像的y像素坐标。

我想我也会把这个扔出去。我还不能在旧版浏览器中测试它，但它在前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()};
};