DOM中获取元素尺寸和位置常用的API

应用场景

1. 很多时候，网页需要在不同尺寸大小的设备上显示出相同的效果，这就得用到自适应布局。用的比较多的是相对尺寸rem，这个时候需要获取页面的宽度来计算当前设备的rem对应的像素值。
2. 在页面的交互过程中，也经常需要获取页面的状态来实时动态调整。比如懒加载需要了解相应元素在页面中的位置，更具操作调整元素的尺寸，位置等等

常用获取方法

• window.innerWidth, window.innerHeight 获取浏览器整体窗口的宽高
• client系列
  • clientTop: 获取元素border-top的宽度
  • clientLeft:获取元素border-left的宽度
  • clientWidth: 获取元素的宽度，不包含border
  • clientHeight:获取元素的高度，不包含border
  • getBoundingClientRect(): 获取与元素尺寸信息有关的对象， 记住这个API，特别好用！！！ 配合window.innerHeight，onscroll可以方便的实现lazy load
    • top bottom: 获取元素上下边(不考虑margin)到浏览器窗口上边的距离数值
    • left right: 获取元素左右边(不考虑margin)到浏览器窗口左边的距离数值
    • width height: 元素的宽度和高度(包含border)
    • x y : 或元素左顶点到窗口左边和上边的距离(不考虑margin) 这个属性兼容性不好，不用
• offset系列
  • offsetParent:获取元素的最近position不是static的祖先元素
  • **offsetLeft: **获取元素（包含border）相对于最近position不是static的祖先元素的左边距离（不包含border，包含padding）
  • **offsetTop: **获取元素（包含border）相对于最近position不是static的祖先元素的上边距离（不包含border，包含padding）
  • **offsetWidth: **获取元素的宽度，包含border
  • **offsetHeight: **后去元素的高度，包含border
• scroll系列
  • **scrollLeft: **获取左侧卷入不可见区域的宽度
  • **scrollTop: **获取上侧卷入不可见的区域
  • **scrollWidth: **获取的宽度为（内容实际宽度包括卷入的区域+padding部分）与（元素宽度+padding部分）
  • **scrollHeight: **获取的宽度为（内容实际高度包括卷入的区域+padding部分）与（元素高度+padding部分）
  • **window.scrollBy(x,y): ** 窗口相对滚动函数
  • **window.scrollTo(x,y): **窗口绝对滚动函数