JavaScript 使用offsetParent

■知識點

    offsetParent屬性表示最近的上級定位元素。要獲取相對父級元素的位置，可以先判斷offsetParent屬性是否指向父元素，如果是，則直接使用offsetLeft和offsetTop屬性獲取元素相對于父元素的距離，否則分別獲得當前元素和父元素距離窗口的坐標，然后求差即可。

■實例設計

//獲取指定元素距離父元素左上角的偏移坐標

//參數(shù)：e表示獲取位置的元素

//返回值：返回對象直接量，其中屬性x表示x軸偏移距離，屬性y表示y軸偏移距離

functiongetP(e){

    if (e .parentNode == e. offsetParent) { //判斷 offsetParent 屬性是否指向父級元素

        var x = e.offsetLeft;                                 //如果是，則直接讀取 offsetLeft 屬性值

        var y = e.offsetTop;                                 //讀取 offsetTop 屬性值

    }

    else{//否則調(diào)用getWO擴展函數(shù)獲取父元素的偏移位置，并返回它們的差值 

        var o = getPoint(e); 

        var p = getPoint(e.parentNode); 

        var x = o.x - p.x; 

        var y = o.y - p.y;

    }

    return {                                        //返回當前元素距離父元素的坐標

        "x" : x,

        "y" : y,

    };

}

下面調(diào)用該擴展函數(shù)獲取指定元素相對父元素的偏移坐標。

var box = document.getElementByld("box"); 

var o = getP(box);                               //調(diào)用擴展函數(shù)獲取元素相對父元素的偏移坐標

console.log(o.x);                                 //讀取x軸坐標偏移值

console.log(o.y);                                 //讀取y軸坐標偏移值