前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS offsetParent属性:获取最近的上级定位元素

JS offsetParent属性:获取最近的上级定位元素

作者头像
4O4
发布2022-07-13 05:57:10
7.6K0
发布2022-07-13 05:57:10
举报
文章被收录于专栏:404404

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

代码语言:javascript
复制
//获取指定元素距离父元素左上角的偏移坐标
//参数:e表示获取位置的元素
//返回值:返回对象直接量,其中属性x表示x轴偏移距离,属性y表示y轴偏移距离
function getP (e) {
    if (e.parentNode == e.offsetParent) {  //判断offsetParent属性是否指向父级元素
        var x = e.offsetLeft;  //如果是,则直接读取offsetLeft属性值
        var y = e.offsetTop;  //读取offsetTop属性值
    } else {  //否则调用getW()扩展函数获取父元素的偏移位置,并返回它们的差值
        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
    },
}

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

代码语言:javascript
复制
var box = document.getElementById("box");
var o = getP (box);  //调用扩展函数获取元素对应父元素的偏移坐标
console.log(o.x);  //读取x轴坐标偏移值
console.log(o.y);  //读取y轴偏坐标移值

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档