CSS 中clientX clientY offsetX offsetY 等属性说明

CSS 中clientX clientY offsetX offsetY 等属性说明

示意图

1. event.clientX, event.clientY : 鼠标点击的位置距离 body 的大小
2. event.screenX, event.screenY : 鼠标点击的位置距离 屏幕 的大小
3. event.offsetX, event.offsetY 鼠标点击的位置距离 div盒子 的大小

---

没有滚动条的情况下

4. offsetWidth, offsetHeight, 盒子的大小, 包括了 padding + border + div的width
5. clientWidth, clientHeight, 盒子的大小, padding + div的width
6. scrollWidth, scrollHeight 盒子的大小 , padding + div的width
   

---

存在滚动条

7. scrollWidth为实际内容的宽度
8. clientWidth是内容可视区的宽度。
9. offsetWidth是元素的实际宽度。