getElementRect

获取 HTML 元素相对于视口的位置和尺寸信息。

函数签名

function getElementRect(element: HTMLElement): Rect

interface Rect {
  x: number        // 左上角 x 坐标（相对于视口）
  y: number        // 左上角 y 坐标（相对于视口）
  width: number    // 元素宽度（像素）
  height: number   // 元素高度（像素）
  top: number      // 顶部坐标（等于 y）
  left: number     // 左侧坐标（等于 x）
  right: number    // 右侧坐标（left + width）
  bottom: number   // 底部坐标（top + height）
}

参数

参数名	类型	必填	说明
element	HTMLElement	是	要获取矩形信息的 HTML 元素

返回值

类型	说明
Rect	元素的矩形信息对象，包含位置、尺寸和边界坐标

工作原理

1. 调用元素的 getBoundingClientRect() 方法获取原始矩形信息
2. 提取并返回标准化的矩形对象，包含：
   • 位置坐标（x, y, top, left）：相对于视口左上角
   • 尺寸（width, height）：包括 padding 和 border，不包括 margin
   • 边界坐标（right, bottom）：计算得出

返回的坐标相对于视口（viewport），而非文档（document），与 CSS 的 position: fixed 坐标系统一致。滚动会影响返回的位置值。