client offset scroll 之间的区别
- 2022 年 6 月 13 日
- 笔记
- html5, javascript, JavaScript高级
一、client
| 属性 | 值 |
| clientWidth | 元素被设置的宽度 + padding左右内间距 |
| clientHeight | 元素被设置的高度 + padding上下内间距 |
| clientLeft | 左 边框的宽度 |
| clientTop | 上 边框的宽度 |
二、offset
| 属性 | 值 |
| offsetWidth | 元素被设置的宽度 + padding左右内间距 + 左右边框的值 |
| offsetHeight | 元素被设置的高度 + padding上下内间距 + 上下边框的值 |
| offsetLeft | 元素外边距离父级左内边距 |
| offsetTop | 元素外边距离父级上内边距 |
| offsetParent | 返回这个元素的父级元素 |
注：1）offsetLeft/offsetTop：参照由父级身上的 position：absolute/fixed，如果父级元素身上没有就逐层向上查找，直到 body；
2）offset 必须和 position 配合使用，往往这个值还必须是 absolute；
3）offset往往和我们做元素的运动有关；
三、scroll
| 属性 | 值 |
| scrollWidth/scrollHeight | 就是我们设置的宽和高加内边距（内容没有溢出的前提，如果超出了范围就按内容而定） |
| scrollLeft/scrollTop | 滚动条卷走的高度 |
四、总结
1）client系列不获取边框数值，offset会获取边框的数值；
2）以上两者获取到的数值都受元素被设置的宽高具体数值影响，如果在出现滚动条的情况下想获取元素内所有内容的实际高度，则使用scrollHeight；
3）获取浏览器的body的属性是有兼容的
var dd=document . body || document . documentElement;获取body的整个文档的高
document . scrollHeight || document . documentElement . scrollHeight;获取屏幕的高（浏览器的可视区）
document . body || document . documentElement . clientHeight
