BOM-三大系列篇

1. 元素偏移量offset系列

1. offset 概述：

   1. offset 翻译过来就是偏移量
   2. 我们使用 offset 系列相关属性可以`动态的`得到该元素的位置（偏移）、大小等
   

2. offset系列的属性：

   element.offsetTop
   // 如果没有带定位的父级元素，则相对 body 元素
   

   序号	属性	描述
   1	offsetParent	获取该元素带有定位的父级元素（如果父级没有定位，返回body）
   2	offsetTop	获取该元素相对带有定位父级元素上方的偏移，不带单位
   3	offsetLeft	获取该元素相对带有定位父级元素左边框的偏移，不带单位
   4	offsetWidth	获取自身的宽度（边框盒），不带单位
   5	offsetHeight	获取自身的高度（边框盒），不带单位

3. offset 和 style 区别：
   
4. 放大镜案例的公式:
   
   

2. 元素可视区 client 系列

1. client 概述：

   1. client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息
   2. 通过 client 系列的相关属性`可以动态的得到该元素的`边框大小、元素大小等
   

2. client 系列的属性：

   element.clientWidth
   // 获取到的元素大小包括（padding、内容区）
   

   序号	属性	描述
   1	clientTop	获取元素上边框的大小，不带单位
   2	clientLeft	获取该元素左边框的大小，不带单位
   3	clientWidth	获取该元素自身的宽度（不含边框），不带单位
   4	offsetHeight	获取该元素自身的高度（不含边框），不带单位

3. clientLeft 与 offsetLet 的区别在于获取到的元素大小不包含边框，但是它有获取边框大小的属性

3. 元素滚动 scroll 系列

1. scroll 概述：

   1. scroll 翻译过来就是滚动的
   2. 我们使用 scroll 系列相关的属性可以动态的得到该元素的大小、滚动距离等
   

2. scroll 系列的属性 ：

   序号	属性	描述
   1	scrollTop	获取被卷去的上侧距离，不带单位
   2	scrollLeft	获取被卷去的左侧距离，不带单位
   3	scrollWidth	获取该元素自身实际的宽度（不含边框），不带单位
   4	scrollHeight	获取该元素自身实际的高度（不含边框），不带单位

3. scrollWidth 与 clientWidth 的区别在于，它获取到的是元素的实际大小（包含padding），比如内容溢出的部分也计算在内

4. 页面被卷去的头部

   1. 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条
   2. 当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为`页面被卷去的头部`
   3. 页面被卷去的头部:`window.pageYOffset` （IE9以上支持）
   4. 页面被卷去的左侧:`window.pageXOffset` （IE9以上支持）
   5. 注意：元素被卷去的头部是`element.scrollTop`获取
   

5. onscroll事件：

   1. `onscroll` 事件，在滚动条滚动时触发 
   2. 如果是页面滚动事件，那么事件源是`document`
   

6. 滚动窗口

   // 1. 滚动窗口至文档中特点位置：x、y写数值就行，不带单位
   window.scroll(x, y)
   

4. 三大系列总结

1. 获取元素大小对比

   序号	三大系列大小对比	描述
   1	offsetWidth	返会自身宽度（边框盒），不带单位
   2	clientWidth	返会自身宽度（不含边框），不带单位
   3	scrollWidth	返会自身实际宽度（不含边框，含溢出部分），不带单位

2. 三大系列主要用法

   1. `offset 系列`，经常用于获得元素位置 offsetTop、offsetLeft
   2. `client 系列`，经常用于获得元素大小 clientWidth、clientHeight
   3. `scroll 系列`， 经常用于获取滚动距离 scrollTop、scrollLeft