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,
}

 

(.)