实现一个函数 offset(element)，获取 DOM 元素的偏移量

推荐答案

function offset(element) {
    const rect = element.getBoundingClientRect();
    return {
        top: rect.top + window.pageYOffset,
        left: rect.left + window.pageXOffset
    };
}

本题详细解读

1. 函数功能

offset(element) 函数用于获取指定 DOM 元素相对于文档的偏移量。返回一个包含 top 和 left 属性的对象，分别表示元素顶部和左侧相对于文档顶部的距离。

2. 实现思路

• 使用 element.getBoundingClientRect() 方法获取元素相对于视口的位置信息。
• getBoundingClientRect() 返回的 top 和 left 是相对于视口的坐标，因此需要加上 window.pageYOffset 和 window.pageXOffset 来获取相对于文档的坐标。

3. 代码解析

• element.getBoundingClientRect()：返回一个 DOMRect 对象，包含元素的大小及其相对于视口的位置。
• window.pageYOffset：返回文档在垂直方向已滚动的像素值。
• window.pageXOffset：返回文档在水平方向已滚动的像素值。
• 通过将 rect.top 和 window.pageYOffset 相加，得到元素顶部相对于文档顶部的距离。
• 通过将 rect.left 和 window.pageXOffset 相加，得到元素左侧相对于文档左侧的距离。

4. 注意事项

• 该函数假设传入的 element 是一个有效的 DOM 元素。
• 如果页面有滚动条，getBoundingClientRect() 返回的值会随着滚动而变化，因此需要加上 window.pageYOffset 和 window.pageXOffset 来获取相对于文档的固定位置。