js获取元素到屏幕左上角的距离

开发过程中经常会遇到 获取元素到屏幕左上角的距离， 当我们使用jQuery开发时，我们可以使用 $.offset()来获取准确的距离。

如果我们的项目中并没有引入jQuer的话，跟希望通过原生方法实现，此时我们使用 offetLeft/offetTop 或者clientLift/clientTop 其实都不能准确的获取这个距离，这个时候最好就是看看jQ怎么写的，为什么它就能够准确的获取到呢？这就要从$.offset() 源码看起了。

jQuery对于此功能的实现， 源码是这样写的：

jQuery.fn.offset = function( options ) {
    if ( arguments.length ) {
        return options === undefined ?
            this :
            this.each(function( i ) {
                jQuery.offset.setOffset( this, options, i );
            });
    }

    var docElem, win,
        elem = this[ 0 ],
        box = { top: 0, left: 0 },
        doc = elem && elem.ownerDocument;

    if ( !doc ) {
        return;
    }

    docElem = doc.documentElement;

    // Make sure it's not a disconnected DOM node
    if ( !jQuery.contains( docElem, elem ) ) {
        return box;
    }

    // If we don't have gBCR, just use 0,0 rather than error
    // BlackBerry 5, iOS 3 (original iPhone)
    if ( typeof elem.getBoundingClientRect !== core_strundefined ) {
        box = elem.getBoundingClientRect();
    }
    win = getWindow( doc );
    return {
        top: box.top + win.pageYOffset - docElem.clientTop,
        left: box.left + win.pageXOffset - docElem.clientLeft
    };
};

可以看到，实现此功能的核心代码是： element.getBoundingClientRect 方法，

从名字上就可以看出，意思就是获取屏幕边界，与该元素相关的CSS 边框集合。

内容截图如下：

值得一提的是，该方法下 没有内容的边框会被忽略。

想要获取元素到屏幕左上角距离 可以使用如下方法

var div1 = document.getElementById('div1');
var domRect = {
    offsetLeft:  div1.getBoundingClientRect().left,
    offsetTop:  div1.getBoundingClientRect().top,
}

(.)