JavaScript 使用offsetParent

■知識(shí)點(diǎn)

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

■實(shí)例設(shè)計(jì)

//獲取指定元素距離父元素左上角的偏移坐標(biāo)

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

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

functiongetP(e){

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

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

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

    }

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

        var o = getPoint(e); 

        var p = getPoint(e.parentNode); 

        var x = o.x - p.x; 

        var y = o.y - p.y;

    }

    return {                                        //返回當(dāng)前元素距離父元素的坐標(biāo)

        "x" : x,

        "y" : y,

    };

}

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

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

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

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

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