元素偏移量offset系列
offset系列相关属性可以动态地获取该元素的位置(偏移)、大小等
- 获取元素距离带定位父元素的位置
- 获得元素自身的宽度高度大小(注：返回的数值都不带单位)
offset系列常用属性：
| 属性 | 作用 |
|---|---|
| element.offsetParent | 返回该元素带有定位的父级元素，如果父级元素没有定位则返回body |
| element.offsetTop | 返回该元素上外边框相对带有定位的父级元素上内边框的偏移，如果父级元素没有定位则返回相对body上方的偏移 |
| element.offsetLeft | 返回该元素左外边框相对带有定位的父级元素左内边框的偏移，如果父级元素没有定位则返回相对body左侧的偏移 |
| element.offsetWidth | 返回该元素包括padding+border+content的宽度 |
| element.offsetHeight | 返回该元素包括padding+border+content的高度 |
注：
1.如果存在垂直滚动条，offsetWidth叶包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight也包括水平滚动条的高度
2.当需要获得某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop和该元素的offsetParent的相同属性相加，再加上offsetParent的相应方向的边框值，如此循环到根元素，就可获得
offset和style的区别
| offset | style |
|---|---|
| offset可以得到任意样式表中的样式值 | style只能得到行内样式表中的样式值 |
| offset系列获得的数值是没有单位的 | style.width得到的值是带有单位的字符串 |
| offsetWidth包含padding+border+width | style.width得到的值不包含padding+border |
| offsetWidth是只读属性 | style.width可读写 |
| 想要获取元素大小位置，用offset更合适 | 想要给元素更改值，则需要用style |
元素可视区client系列
通过client相关的属性可以动态地得到该元素的边框大小，元素大小等，不带单位
| 属性 | 作用 |
|---|---|
| element.clientTop | 返回该元素上边框大小 |
| element.clientLeft | 返回该元素左边框大小 |
| element.clientWidth | 返回该元素包括padding+content的宽度，不含边框 |
| element.clientHeight | 返回该元素包括padding+content的高度，不含边框 |
元素滚动scroll系列
使用scroll系列相关属性可以动态获得该元素的大小、滚动距离等，不带单位
| 属性 | 作用 |
|---|---|
| element.scrollTop | 返回被卷去的上侧距离，从内容顶部到上内边框 |
| element.scrollLeft | 返回被卷去的左侧距离 |
| element.scrollWidth | 返回该元素自身实际的宽度，不含边框 |
| element.scrollHeight | 返回该元素自身实际的高度，不含边框 |
