js 三大的家族

offset家族

offsetParent

返回改对象的父级 （带有定位） 不一定是亲的爸爸

1.如果元素自身是固定的，那么获取到的父级定位级为null
2.如果元素自身不是固定定位(absolute relative) 那么就网上找父级定位，如果所有的父级定位都没找到 那么找到body
3.body的定位父级为null

offsetWidth offsetHeight

得到对象的宽度和高度(自己的，与他人无关)
offsetWidth = width + border + padding

offsetLeft offsetTop

返回距离上级盒子（最近的带有定位）左边的位置
如果父级都没有定位则以body 为准
这里的父级指的是所有上一级 不仅仅指的是 父亲 还可以是 爷爷 曾爷爷 曾曾爷爷。。。。
offsetLeft 从父级的padding 开始算 父亲的border 不算
总结一下： 就是子盒子到定位的父盒子边框到边框的距离

offsetTop style.top 的区别

一、最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right
二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
三、offsetTop 只读，而 style.top 可读写。
四、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
五、最重要的区别:style.left 只能得到 行内样式 ,offsetLeft 随便。

scoll家族

scroll 滚动的

scrollTop scrollLeft

scrollTop 被卷去的头部
它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

//获取页面滚动出去的距离的封装
function getPageScroll(){
    
    var left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
    var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

    return {
        scrollLeft:left,
        scrollTop:top    
    }

client家族

client 家族获取到的是 页面的可视区域

clientWidth clientHeight

/页面的可视区域

clientLeft clientTop

实际获取到的是左边框和上边框 用的很少

//获取页面可视区域的兼容性封装
function getClientSize() {
   var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
   var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;

   return {
       clientWidth: width,
       clientHeight: height
   }
}