CSS 中clientX clientY offsetX offsetY 等属性说明
CSS 中clientX clientY offsetX offsetY 等属性说明
示意图
- event.clientX, event.clientY : 鼠标点击的位置距离 body 的大小
- event.screenX, event.screenY : 鼠标点击的位置距离 屏幕 的大小
- event.offsetX, event.offsetY 鼠标点击的位置距离 div盒子 的大小
没有滚动条的情况下
- offsetWidth, offsetHeight, 盒子的大小, 包括了 padding + border + div的width
- clientWidth, clientHeight, 盒子的大小, padding + div的width
-
scrollWidth, scrollHeight 盒子的大小 , padding + div的width
存在滚动条
- scrollWidth为实际内容的宽度
- clientWidth是内容可视区的宽度。
-
offsetWidth是元素的实际宽度。