JS三大系列 offset scroll client

在JS中有三种常用来获取元素宽高和位置的方法，称之为JS的三大系列

一. offset系列

计算方式： (父级元素margin + 父级元素padding + 父级元素border + 元素自己的margin)这里的父级元素指的是第一个定位的父级元素，没有就是body
1. offsetLeft ： 当前元素的左边框的左侧到定位父级盒子的左边框的右侧
2. offsetTop : 当前元素的上边框的顶侧到定位父级盒子的上边框的底侧
3. offsetHeight ：元素的高度（包含边框）
4. offsetWidth ：元素的宽度（包含边框）
5. offsetParent ：获取最近一个有定位的父级元素，没有就是body

二. scroll系列

1. scrollLeft ： 元素向左卷曲出去的距离
2. scrollTop ：元素向上卷曲出去的距离
3. scrollWidth ：元素中内容的实际宽度，如果内容很少，得到元素的宽度（不含边框）

4. scrollHeight ：元素中内容的实际高度，如果内容很少，得到元素的高度（不含边框）

   在获取scrollLeft和scrollTop时，会有一些浏览器的兼容问题，下面是兼容代码

    function getScroll() {
        return {
            left : window.pageXOffset || document.documentElement.scrollLeft || document.documentElement.scrollLeft || 0,
            top : window.pageYOffset || document.documentElement.scrollTop || document.documentElement.scrollTop || 0,
        };
    }

三. client系列

1. clientLeft：左边框的宽度
2. clientTop：上边框的宽度
3. clientHeight：可视区域的高度（无边框）
4. clientWidth：可视区域的宽度（无边框）
5. clientX： 可视区横坐标 或 获取鼠标事件发生时的应用客户端区域的横坐标
6. clientY：可视区纵坐标 或 获取鼠标事件发生时的应用客户端区域的纵坐标