尺寸

偏移尺寸

offsetWidth

包含宽度、水平滚动条宽度(如果存在)、左右边框宽度

offsetHeight

包含高度、水平滚动条高度(如果存在)、上下边框高度

offsetTop

相对于包含元素左边框的像素数

offsetLeft

相对于包含元素上边框的像素数
image.png

客户端尺寸

clientWidth

内容区域宽度加左、右内边距宽度

clientHeight

内容区域高度加上、下内边距宽度
image.png

滚动尺寸

scrollWidth

没有滚动条出现时,元素内容的总高度

scrollHeight

没有滚动条出现时,元素内容的总宽度

scrollLeft

内容区左侧隐藏的像素数,设置该属性可改变元素水平方向的滚动位置

scrollTop

内容区顶部隐藏的像素数,设置该属性可改变元素垂直方向的滚动位置
image.png

getBoundingClientRect()

此方法可以取得小数,相对于其他属性来说更精确👍

返回一个 DOMRect 对象,包含6个属性:lefttoprightbottomheightwidth;这些属性表示元素在页面中相对于视口的位置
image.png

坐标

客户端坐标

事件发生时,鼠标光标在视口中的坐标,不受页面滚动影响

clientX

clientY

页面坐标

事件发生时,鼠标光标在页面中的坐标,受页面滚动影响

pageX

pageY

屏幕坐标

事件发生时,鼠标光标在屏幕中的坐标

screenX

screenY