getBoundingClientRect介绍

最新推荐文章于 2023-12-08 17:52:45 发布

转载最新推荐文章于 2023-12-08 17:52:45 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016815362

本文详细介绍了getBoundingClientRect方法，该方法用于获取元素相对于浏览器视口的位置，包括元素的上下左右边界距离及高宽。此方法已是W3C标准，兼容性良好。文章提供了兼容性写法，确保在IE等不同浏览器下的稳定应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

getBoundingClientRect用于获取元素相对与浏览器视口的位置

由于getBoundingClientRect()已经是w3c标准，所以不用担心兼容，不过在ie下还是有所区别

{
    top: '元素顶部相对于视口顶部的距离',
    bottom: '元素底部相对于视口顶部的距离',
    left: '元素左边相对于视口左边的距离',
    right: '元素右边相对于视口左边的距离',
    height: '元素高度',
    width: '元素宽度'
}

// 兼容写法
function getClientReat(client) {
    const { top, bottom, left, right, height, width } = client.getBoundingClientRect()
    return {
        top,
        bottom,
        left,
        right,
        height: height || bottom - top,
        width:    width || right - left
    }
}