offset系列、scroll系列和client系列的用法、区别及兼容性代码

offset系列 获取元素真实的宽高与位置

• offsetWidth/offsetHeight 特点如下

  • 获取的是number数据类型的，不带单位
  • 只能用于获取，不能修改
  • 获取的是元素的真实宽高（width/height + padding + border）

• offsetParent

  • 获取的是最近的定位父级
  • 如果元素是非固定定位，且该元素所有的父元素都没有定位，则定位父级是body
  • 如果一个元素是固定定位，定位父级是null
  • body的定位父级是null

• offsetLeft/offsetTop

  • 元素自身的左/上外边距(margin) 到 定位父级左/上 内边距(padding) 的距离
    

scroll系列 元素的内容的真实宽高与位置

• scrollWidth/scrollHeight 获取元素的内容的真实宽高

• scrollTop/scrollLeft (pageXOffset/pageYOffset) 滚动出去的部分

  • 使用场景：头部固定导航等
  • 一般获取的是整个网页滚动出去的距离，兼容性写法为：

var x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

client系列 获取可视区域的宽高

• clientWidth/clientHeight (innerWidth/innerHeight) 元素可视区域的真实宽高

  • 使用场景：响应式开发（比如判断横屏竖屏）
    • cWidth > cHeight ? ‘横屏’ : ‘竖屏’
  • 一般获取的是整个页面的可视区域的大小

var cWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var cHeight = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;

• clientLeft/clientTop 左边框和上边框 （不常用）相当于border-left-width border-top-width

• 网页大小变化事件 window.onresize