背景

最近做項(xiàng)目，由于zepto使用的功能較少，想將zepto的功能用較少原生實(shí)現(xiàn)，其中有個(gè)實(shí)現(xiàn)zepto的offset()方法取到各種值的難為了我，我百度了下，大體網(wǎng)上千篇一律的這樣寫(xiě)到

這篇文章主要介紹了js實(shí)現(xiàn)jquery的offset()方法,實(shí)例分析了jquery的offset()方法原理與采用javascript實(shí)現(xiàn)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)jquery的offset()方法。分享給大家供大家參考。具體分析如下：
用過(guò)jQuery的offset()的同學(xué)都知道offset().top或offset().left很方便地取得元素相對(duì)于整個(gè)頁(yè)面的偏移。
而在js里，沒(méi)有這樣直接的方法，節(jié)點(diǎn)的屬性offsetTop可以獲得該節(jié)點(diǎn)相對(duì)于父節(jié)點(diǎn)的相對(duì)偏移，但不能直接獲得其絕對(duì)偏移，我們可用節(jié)點(diǎn)逐層遞歸向上來(lái)相加offsetTop來(lái)獲得絕對(duì)偏移。
復(fù)制代碼代碼如下:
function getOffset(Node, offset) {    
    if (!offset) {        
          offset = {};
          offset.top = 0; 
          offset.left = 0;
    }
    if (Node == document.body) {
            //當(dāng)該節(jié)點(diǎn)為body節(jié)點(diǎn)時(shí)，結(jié)束遞歸        
            return offset;   
     }
    offset.top += Node.offsetTop;    offset.left += Node.offsetLeft;
    return getOffset(Node.parentNode, offset);//向上累加offset里的值
}
使用時(shí)，則如：
復(fù)制代碼代碼如下:
var a = document.getElementById('a');//getOffset(a).top//getOffset(a).left
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

我本著試試看的態(tài)度將這個(gè)方法炒了上去，打印出值結(jié)果與我需要的值相差甚遠(yuǎn)，為此我仔細(xì)翻了下源碼，源碼見(jiàn)下面鏈接
源碼
找到如下方法getBoundingClientRect，翻了下caniuse發(fā)現(xiàn)兼容性還好（本人移動(dòng)端），故可以寫(xiě)成以下方式

//獲取當(dāng)前元素相對(duì)于文檔的偏移量 
let getOffset = (elem) => {    
    let docElem = document.documentElement; 
    let box = elem.getBoundingClientRect();  
    return {  
            top: box.top  +  docElem.scrollTop ,  
            left: box.left + docElem.scrollLeft   
      }

如果要考慮兼容性，請(qǐng)仔細(xì)看zepto源碼
另外上述

function getOffset(Node, offset) {    
    if (!offset) {        
          offset = {};
          offset.top = 0; 
          offset.left = 0;
    }
    if (Node == document.body) {
            //當(dāng)該節(jié)點(diǎn)為body節(jié)點(diǎn)時(shí)，結(jié)束遞歸        
            return offset;   
     }
    offset.top += Node.offsetTop;    offset.left += Node.offsetLeft;
    return getOffset(Node.parentNode, offset);//向上累加offset里的值
}

改成

function getOffset(Node, offset) {    
    if (!offset) {        
          offset = {};
          offset.top = 0; 
          offset.left = 0;
    }
    if (Node == document.body) {
            //當(dāng)該節(jié)點(diǎn)為body節(jié)點(diǎn)時(shí)，結(jié)束遞歸        
            return offset;   
     }
    offset.top += Node.offsetTop;    offset.left += Node.offsetLeft;
    return getOffset(Node.offsetParent, offset);//向上累加offset里的值
}

也可以實(shí)現(xiàn)