一.前言

在我们前端开发过程中,有时候会遇到需要求元素距离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~~~