原生js實現offset方法

在爲 jTool 提供 offset (獲取當前節點位置）方法時， 前後使用了兩種方式進行實現， 現整理出來以做記錄。

經過遞歸實現

function offset(element) {
    var offest = {
        top: 0,
        left: 0
    };

    var _position;

    getOffset(element, true);

    return offest;

    // 遞歸獲取 offset, 能夠考慮使用 getBoundingClientRect
    function getOffset(node, init) {
        // 非Element 終止遞歸
        if (node.nodeType !== 1) {
            return;
        }
        _position = window.getComputedStyle(node)['position'];

        // position=static: 繼續遞歸父節點
        if (typeof(init) === 'undefined' && _position === 'static') {
            getOffset(node.parentNode);
            return;
        }
        offest.top = node.offsetTop + offest.top - node.scrollTop;
        offest.left = node.offsetLeft + offest.left - node.scrollLeft;

        // position = fixed: 獲取值後退出遞歸
        if (_position === 'fixed') {
            return;
        }

        getOffset(node.parentNode);
    }
}
// 執行offset
var s_kw_wrap = document.querySelector('#s_kw_wrap');
offset(s_kw_wrap);  // => Object {top: 181, left: 400}

經過ClientRect實現

function offset2(node) {
    var offest = {
        top: 0,
        left: 0
    };
    // 當前爲IE11如下, 直接返回{top: 0, left: 0}
    if (!node.getClientRects().length) {
        return offest;
    }
    // 當前DOM節點的 display === 'node' 時, 直接返回{top: 0, left: 0}
    if (window.getComputedStyle(node)['display'] === 'none') {
        return offest;
    }
    // Element.getBoundingClientRect()方法返回元素的大小及其相對於視口的位置。
    // 返回值包含了一組用於描述邊框的只讀屬性——left、top、right和bottom，單位爲像素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。
    // 返回如{top: 8, right: 1432, bottom: 548, left: 8, width: 1424…}
    offest = node.getBoundingClientRect();
    var docElement = node.ownerDocument.documentElement;
    return {
        top: offest.top + window.pageYOffset - docElement.clientTop,
        left: offest.left + window.pageXOffset - docElement.clientLeft
    };
}
// 執行offset
var s_kw_wrap = document.querySelector('#s_kw_wrap');
offset2(s_kw_wrap);  // => Object {top: 181.296875, left: 399.5}

注意事項

offset2() 函數中使用到了 .getClientRects() 與 .getBoundingClientRect() 方法，IE11 如下瀏覽器並不支持; 因此該種實現， 只適於現代瀏覽器。

.getClientRects()

返回值是 ClientRect 對象集合(與該元素相關的CSS邊框)，每一個 ClientRect 對象包含一組描述該邊框的只讀屬性——left、top、right 和 bottom，單位爲像素，這些屬性值是相對於視口的top-left的。

幷包含 length 屬性， IE11如下能夠經過是否包含 length 來驗證當前是否爲IE11以上版現。

.getBoundingClientRect()

返回值包含了一組用於描述邊框的只讀屬性——left、top、right 和 bottom，單位爲像素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。

.getBoundingClientRect() 與 .getClientRects()的關係
這兩個方法的區別與當前的 display 相關， 當 display=inline 時， .getClientRects() 返回當前節點內每一行文本的 ClientRect 對象數組， 此時數組長度等於文本行數。

當 display != inline 時， .getClientRects() 返回當前節點的 ClientRect 對象數組，此時數組長度爲1.

.getBoundingClientRect() 老是返回當前節點的 ClientRect 對象， 注意這裏是 ClientRect 對象而不是對象數組。

相關API

getClientRects

getBoundingClientRect

提示

以上測試， 能夠經過在百度首頁執行進行測試， document.querySelect('#s_kw_wrap') 所獲取到的節點爲百度首頁輸入框

以上代碼是在進行jtool類庫編碼時實踐出來的方式，歡迎star