计算元素在页面上的位置和尺寸

clientHeight

height + padding - 水平滚动条高度（如果存在）

offsetHeight

height + padding + border

offsetX

• 相对于事件目标元素元素
• 鼠标指针相对于事件目标元素的左上角的水平偏移量
• 通常用于获取鼠标在元素内部的位置

clientX

• 相对于视口
• 相对于可见区域，不包含滚动的部分
• 用于获取鼠标在视口中的具体位置，常用于拖拽等操作

pageX

• 相对于整个文档
• 包括滚动的部分，表示在整个网页中的位置
• 用于获取鼠标在整个页面中的位置，适合需要页面位置的计算

screenX

• 相对于屏幕
• 鼠标指针相对于整个屏幕的水平坐标
• 相对于显示器的左上角，包括任务栏和其他界面元素

scrollHeight

height + padding

getBoundingClientRect()

返回一个对象，包含元素的位置和大小信息

除了 width 和 height 以外的属性都是相对于视图窗口的左上角来计算的

整体对比图