一.前言
在我们前端开发过程中,有时候会遇到需要求元素距离body最左侧的距离,而我们并没有直接的一个属性可以获得这个值,那么这时候就有同学会说用offsetLeft,如果我们用这个属性获得元素距离body最左侧的距离的前提是它的外层没有设有定位的祖先元素.那么我们是否可以自己封装一个函数获得这个距离呢??????
二.思路解析
要求得元素距离body最左侧的距离,当然第一时间想到用offsetLeft,但是我们知道使用offsetLeft的时候,如果有设有定位的祖先元素，offsetLeft就是该元素距离祖先元素左侧的距离，如果没有设有定位的祖先元素，是该元素距离body左侧的距离.
有设有定位的祖先元素
没有设有定位的祖先元素
我们就可以用判断语句,当有设有定位的祖先元素的时候,和没有设有定位的祖先元素.没有的时候最终结果就是元素的offsetLeft值.怎么判断有没有-设有定位的祖先元素呢?这里就需要介绍一下:
offsetParent:
找离该元素最近的设有定位的祖先元素，如果没有则找到body,当找到的是为body的时候,值为null.
可以采用while循环判断,若offsetParent的值为null,则找到的是body,直接返回offsetLeft的值,代表的是元素距离body最左侧的距离,若不为null则找到的是设有定位的祖先元素,此时offsetLeft的值为该元素距离祖先元素左侧的距离,这时候需要再对祖先元素进行判断,直到offsetParent的值为null,也就是找到了body.用while进行累加距离.
具体代码如下:⬇
三.完整代码
Object.prototype.offset = function(){
//在object原型对象中封装函数
let x = this.offsetLeft;
let y = this.offsetTop;
let parent = this.offsetParent
//while判断是否有设有定位的祖先元素
//parent.offsetParent = null表示找到的是body,则不需要进入while
//parent.offsetParent != null表示找到的是设有定位的祖先元素
while (parent.offsetParent != null) {
x+= parent.offsetLeft;
y+= parent.offsetTop;
parent = parent.offsetParent;
}
return {x,y}//{x:x,y:y}
}这里有小伙伴会问,为什么函数封装在Object原型对象(Object.prototype)里面,哈哈哈哈哈关注一波博主吧,在前面发布的原型和原型链中有提到哟,大家可以去看看具体原因哟:
Object的原型对象中的成员，可以所有对象访问, Object是原型链的尽头. Object原型对象通过Object.prototype得到。
大家问题解决了吗????有问题私信或者留言哦~~~~mua~~~