JS中关于位置和尺寸的api

HTMLElement.offsetParent

　　由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的，故offsetParent的意义十分重大。offsetParent的机制与css中包含块的概念十分类似但并不完全一致，其不一致有时候是由于浏览器的不同而导致的，例如：当元素为固定定位时(fixed)，chrome浏览器的 offsetParent 值为 Null，而火狐的则为 body 元素。总结规律如下：

• 规则(当html和body之间的margin被清除时)：

• 	本身定位为fixed		本身定位非fiexd
  offsetParent	火狐	非火狐	父级无定位	父级有定位
  	body	null	body	有定位的父级

• 尽管本身定位为fixed时，非火狐浏览器为null，body.offsetTop 和 body.offsetLeft的值仍然为0（即默认值为0）。因此，当html和body之间的margin值被清除时，就可以视为 offsetLeft 和 offsetTop 也是参照于 body 的。

HTMLElement.offsetLeft

　　 offsetLeft 是一个只读属性，返回当前元素左上角相对于 offsetParent 节点的左边界偏移的像素值。 

HTMLElement.offsetTop

　　offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

获取元素在页面中的位置

1.获取绝对位置 --- 原生实现

• while循环叠加offsetParent的offsetTop和offsetLeft计算出元素的绝对位置，元素的 boder 和 margin 会影响这个函数的取值。不推荐使用

• function getPointAb(node){
      //while循环叠加offsetParent的offsetTop和offsetLeft
      var x =0;
      var y = 0;
      while(node){
          x+=node.offsetLeft;
          y+=node.offsetTop;                    
          node = node.offsetParent;
      }
                  
      return {x:x,y:y};
  }    

2.获取滚动条滚动的距离

L = document.documentElement.scrollLeft||document.body.scrollLeft;
T = document.documentElement.scrollTop||document.body.scrollTop;

3.获取相对位置 --- 原生实现

• 在while循环叠加取得绝对位置的基础上，减去滚动条滚动的距离。没有办法兼容border和margin

• //boder margin会影响这个函数的取值
      function getPointRe(node){
      //while循环叠加offsetParent的offsetTop和offsetLeft
          var x =0;
          var y = 0;
          while(node){
              x+=node.offsetLeft;
              y+=node.offsetTop;
                      
              node = node.offsetParent;
      }
                  
      var L = document.documentElement.scrollLeft||document.body.scrollLeft;
      var T = document.documentElement.scrollTop||document.body.scrollTop;
      return {x:x-L,y:y-T};            
  }            

4.Element.getBoundingClientRect() --- 兼容性好

• 返回值：对象
  • width：border-box的宽
  • height：border-box的高
  • top：元素border-box的左上角的相对位置纵坐标
  • left：元素border-box的左上角的相对位置横坐标
  • bottom：元素border-box的右下角的相对位置的纵坐标
  • right：元素border-box的右下角的相对位置的横坐标

获取元素尺寸

1.offsetWidth & offsetHeight

• 该属性是一个只读属性，返回一个元素的尺寸（宽度or高度）
• 其返回值为元素可视区域(padding box)的大小加上边框的大小，即 padding box(可视区域) + border
• 此属性会返回一个四舍五入的小数，若想得到更精确的值，可以使用 getBoundingClientRect() 方法
• 返回值 = 边框(border) + 内边距(padding) + 相应方向滚动条(scrollbar) + CSS设置的宽度(width)或高度(height)的值。

2.clientWidth & clientHeight

• 该属性表示元素的内部宽度，单位值为像素
• 此属性会返回一个四舍五入的小数
• 其返回值为元素可视区域(padding box)的大小
• 注意：当用此属性获取根标签的大小时，无论根标签有没有margin，都会无视margin返回屏幕视口的尺寸（即 document.documentElement.clentWidth 返回该设备屏幕分辨率）

tips：在ie10及ie10以下，根标签的clientWidth和offsetWidth，统一被指定为视口的宽度。

 

标签：body,node,offsetParent,元素,JS,api,尺寸,offsetTop,offsetLeft
来源： https://www.cnblogs.com/zhanghua-zh/p/10327462.html