JavaScript 使用offsetParent

■知识点

    offsetParent属性表示最近的上级定位元素。要获取相对父级元素的位置，可以先判断offsetParent属性是否指向父元素，如果是，则直接使用offsetLeft和offsetTop属性获取元素相对于父元素的距离，否则分别获得当前元素和父元素距离窗口的坐标，然后求差即可。

■实例设计

//获取指定元素距离父元素左上角的偏移坐标

//参数：e表示获取位置的元素

//返回值：返回对象直接量，其中属性x表示x轴偏移距离，属性y表示y轴偏移距离

functiongetP(e){

    if (e .parentNode == e. offsetParent) { //判断 offsetParent 属性是否指向父级元素

        var x = e.offsetLeft;                                 //如果是，则直接读取 offsetLeft 属性值

        var y = e.offsetTop;                                 //读取 offsetTop 属性值

    }

    else{//否则调用getWO扩展函数获取父元素的偏移位置，并返回它们的差值 

        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,

    };

}

下面调用该扩展函数获取指定元素相对父元素的偏移坐标。

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

var o = getP(box);                               //调用扩展函数获取元素相对父元素的偏移坐标

console.log(o.x);                                 //读取x轴坐标偏移值

console.log(o.y);                                 //读取y轴坐标偏移值