offsetTop offsetLeft offsetParent

offsetParent

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
详情参见：HTMLElement.offsetParent

offsetLeft offsetTop

以offsetLeft为例，offsetTop差不多。

HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。

对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。
详情：HTMLElement.offsetLeft

获取元素到网页左侧的距离

由上面可知道offsetLeft是对于offsetParent来说的，所以要获取元素到网页左侧的距离，需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。

var getOffset = {
    left : function (obj) {
        return obj.offsetLeft + (obj.offsetParent ? this.left(obj.offsetParent):0);
    },
    top : function (obj) {
        return obj.offsetTop + (obj.offsetParent ? this.left(obj.offsetParent) : 0);
    }
};

这里的this.left(obj.offsetParent)也可以用arguments.callee(obj.offsetParent)代替，但是在ECMAScript 5 中禁止在严格模式中使用 arguments.callee()。当一个函数必须调用自身的时候，假如它是函数表达式则给它命名，或者使用函数声明，避免使用 arguments.callee()，因为arguments是一个比较庞大的对象，非常耗资源