JavaScript - 获取元素、可视窗口尺寸和元素偏移量

获取元素尺寸(占地面积)

• 语法第一套：
  -元素.offsetWidth
  获取的是元素 内容 + padding + border 区域的宽度
  -元素.offsetHeight
  获取的是元素 内容 + padding + border 区域的高度
  注意：不管盒子模型内容是什么，区域不变

• 语法第二套：
  -元素.clientWidth
  获取的是元素 内容 + padding 区域的宽度
  -元素.clientHeight
  获取的是元素 内容 + padding 区域的高度
  注意：不管盒子模型是什么，区域不变

获取元素偏移量

• 获取偏移量参考元素
  语法：元素.offset Parent
  得到：该元素的偏移量参考父级
  就是该元素的定位父级
  如果到body都没有定位父级，那么这里的offset Parent 就是 body 元素

• 语法第一套
  语法：
  元素.offsetLeft
  获取元素相对于 offsetParent 的左侧距离
  元素.offsetTop
  获取元素相对于 offset Parent 的上方距离

• 语法第二套
  语法：
  元素.clientLeft
  元素(内容 + padding 区域)相对于该元素 border 左边的尺寸
  元素.clientTop
  元素(内容 + padding 区域)相对于该元素 border 上边的尺寸

获取可是窗口尺寸

• BOM 级别的获取：包含滚动条的尺寸
  innerWidth
  innerHeight

• DOM 级别的获取：不包含滚动条的尺寸
  document.documentElement.clientWith
  document.documentElement.clientHeight