JS獲取元素的偏移量offset

var box = document.getElementById("dian");
1.parentNode:父親節點 HTML結構層級關系中的上一級元素

2.offsetParent：父級參照物 在同一個頁面中，最外層的元素里面所有元素的父級參照物都是body（和html結構沒有必然聯系）
 ->一般來說一個頁面中所有的父級參照物都是body
document.body.offsetParent;//null
 想要改變父級參照物需要通過position來進行改變
absolute
relative
fixed
以上都可以進行改變

3.offsetTop/offsetLeft:當前元素距離父級參照物上/左邊距偏移量
->offset():等同於jQuery中的offset方法，實現獲取頁面中任意一個元素距離body的偏移（包含左偏移和上偏移），不管當前元素的父級參照物是誰。
->獲取的結果是一個對象{left:距離body的左偏移量，top:距離body上偏移}
->在標准的ie8瀏覽器中，我們使用offsetLeft/offsetTop其實是把父級參照物的邊框也計算在內了

function offset(curEle){
             var totalLeft = null,totalTop = null,par = curEle.offsetParent;
            //首先把自己本身的進行累加
            totalLeft += curEle.offsetLeft;
            totalTop += curEle.offsetTop;

            //只要沒有找到body，我們就把父級參照物的邊框和偏移量累加
            while(par){
                     if(navigator.userAgent.indexOf("MSIE 8.0") === -1){
                         //不是標准的ie8瀏覽器，才進行邊框累加
                         //累加父級參照物邊框
                         totalLeft += par.clientLeft;
                         totalTop += par.clientTop;
                     }
                    //累加父級參照物本身的偏移
                    totalLeft += par.offsetLeft;
                    totalTop += par.offsetTop;
                    par = par.offsetParent;
            }
            return {left:totalLeft,top:totalTop};
}
console.log(offset(box).top);