前言
最近发现对offset、client、scroll几个属性的区别忘了，所以这篇总结一下元素Element和事件对象event中几个属性的区别
Element
这些属性都是只读的，还有一个建议是不要频繁读取这些属性，这是一个耗性能的操作。
| 属性名 | 含义 |
|---|---|
| offsetWidth | 元素自身可视宽度加上border的宽度 |
| offsetHeight | height+上下padding+上下border |
| offsetTop | 如果父元素有定位，则上边框到父级上边框的距离，父元素没定位，则到body顶部的距离 |
| offsetLeft | 如果父元素有定位，则左边框到父级左边框的距离，父元素没定位，则到body左边的距离 |
| clientWidth | width+左右padding |
| clientHeight | height+上下padding |
| clientTop | border.top（上边框的宽度） |
| clientLeft | border.left（左边框的宽度） |
| scrollWidth | 可视区宽度+被隐藏区域宽度 |
| scrollHeight | 可视区高度+被隐藏区域高度 |
| scrollTop | 元素已滚动的高度 |
| scrollLeft | 元素已滚动的宽度 |
Event
| 属性名 | 含义 |
|---|---|
| clientX/clientY | 点击位置距离当前body可视区域的x、y坐标 |
| screenX/screenY | 点击位置距离当前电脑屏幕的x、y坐标 |
| pageX/pageY | 相对于整个页面，包括被卷去的宽高度 |
结语
大概就这些了，冲冲冲！