上来一张图
image.png

offsetWidth/offsetHeight/offsetLeft/offsetTop

offsetWidth/offsetHeight

返回元素的宽度/高度,不包含滚动内容的宽度/高度包括元素的边框、内边距和滚动条。

offsetLeft/offsetTop

只读属性,首先需要确定offsetParent。offsetParent指的是距离该元素最近的position不为static的祖先元素,如果没有则指向body元素。确定了offsetParent,offsetLeft指的是元素左侧距离offsetParent的距离,offsetTop则指上侧偏移的距离。

scrollWidth/scrollHeight/scrollLeft/scrollTop

scrollWidth/scrollHeight

返回元素的整体尺寸,包括滚动部分。包括padding,但不包含margin和border。

scrollLeft/scrollTop

元素发生滚动时的滚动距离

clientWidth/clientHeight/clientLeft/clientTop

clientWidth/clientHeight

包括padding,但不包括border、margin和滚动条。

clientLeft/clientTop

指的是元素边框的宽度。

pageX/pageY

鼠标点击的位置,相对body,包含被滚动的body内容的距离

cilentX/clientY

点击位置距离当前body可视区域的x,y轴坐标

x,y

= pageX、pageY,点击位置,相对body,包含滚动的body的内容的距离

offsetX/offsetY

相对于带有定位的父盒子的x,y坐标(描述有些模糊)

screenX/screenY

点击的位置,距离当前电脑屏幕的x,y坐标

实践

calc-size@llccingCodePen

参考