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轴坐标偏移值
点击加载更多评论>>