js获取某个元素距离浏览器的边距

时间:2024-03-15 21:08:50

知识储备:

js获取某个元素距离浏览器的边距

1.偏移参照(offsetParent):

  在理解偏移大小之前,首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关

  定位父级offsetParent的定义是:与当前元素最近的经过定位(position不等于static)的父级元素,主要分为下列几种情况 

  【1】元素自身有fixed定位,offsetParent的结果为null

  当元素自身有fixed固定定位时,我们知道固定定位的元素相对于视口进行定位,此时没有定位父级,offsetParent的结果为null

  【2】元素自身无fixed定位,且父级元素都未经过定位,offsetParent的结果为<body>

  【3】元素自身无fixed定位,且父级元素存在经过定位的元素,offsetParent的结果为离自身元素最近的经过定位的父级元素

    【4】<body>元素的parentNode是null

2.偏移量(offset dimension):

          涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。

【1】offsetWidth

  offsetWidth表示元素在水平方向上占用的空间大小,无单位(以像素px计)

【2】offsetHeight

  offsetHeight表示元素在垂直方向上占用的空间大小,无单位(以像素px计)

  [注意]如果存在垂直滚动条,offsetWidth也包括垂直滚动条的宽度;如果存在水平滚动条,offsetHeight也包括水平滚动条的高度

 【3】offsetTop

  offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离

【4】offsetLeft

  offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

解决方案

    我们可以先获取它的offset它这是相对父容器的距离。然后使用递归来层层获取上一级的offset。

var getOffsetLeft = function(obj){
              var tmp = obj.offsetLeft;
              var node= obj.offsetParent;
              while(node!= null){
              tmp += val.offsetLeft;
                node= node.offsetParent;
               }
            return tmp;
            }
   
      
var getOffsetTop =  function(obj){
               var tmp = obj.offsetTop;
               var node= obj.offsetParent;
             while(node!= null){
                tmp += node.offsetTop;
               node= node.offsetParent;
               }
                return tmp;
             }