关于元素大小位置、鼠标位置相关属性的总结

[JesseZhao1990]

元素大小位置相关属性的总结

clientXXX

• clientLeft 表示border的宽度
• clientTop 表示border的高度
• clientWidth 表示内容区域的宽度，包括padding大小，但是不包括边框和滚动条
• clientHeight 表示内容区域的高度，包括padding大小，但是不包括边框和滚动条

一图胜千言：

再线测试：https://codepen.io/zhaojianxin/pen/YvargV

offsetXXX

• offsetLeft
• offsetTop
• offsetWidth
• offsetHeight
• offsetParent 往上找非static的第一个定位元素

一图胜千言：

在线测试地址：https://codepen.io/zhaojianxin/pen/oyqELN

scrollXXX

• scrollLeft
• scrollTop
• scrollWidth
• scrollHeight

一图胜千言：

在线测试地址：https://codepen.io/zhaojianxin/pen/xzWjeM

鼠标位置

clientX,clientY 相对于window的偏移量 offsetX, offsetY 相对于被点击元素的偏移量 pageX, pageY 相对于document的偏移量 screenX, screenY 鼠标相对于显示器屏幕的偏移坐标（由于是相对于屏幕的。所以在pc端没太多使用场景） x, y 相当于clientX，clientY