# 计算盒模型的各种尺寸

上来一张图

经典图

# 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坐标

# 实践

# 参考

Last Updated: 2019-11-13 22:55:00