getBoundingClientRect()方法获取Dom元素与浏览器窗口的位置

最新推荐文章于 2024-06-25 16:36:22 发布

yuan溜溜

最新推荐文章于 2024-06-25 16:36:22 发布

阅读量3.5k

点赞数 2

本文链接：https://blog.csdn.net/YMX2020/article/details/107371470

版权

获取Dom元素与浏览器窗口的位置（二）----- getBoundingClientRect()方法

getBoundingClientRect()这个方法可以在不需要额外传参的情况下获取Dom元素的位置，但是值得注意的是，他获取到的位置是可视区范围的，不包括文档滚动的距离

下面我们用一张图来表示他获取到的Dom元素相关信息
在这里插入图片描述

上面的那张图让我们对getBoundingClientRect有了一个整体的初步认识，为了更加直观和细致的感受getBoundingClientRect的用法，下面我打算用一个简单的案列来总结这个方法的正确使用姿势：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>getBoundingClientRect</title>
<style>
    .record{
        width: 200px;
        min-height: 200px;
        background-color: #e99e83;
        text-align: center;
        margin: 30px 20px;
    }
    body {
        margin: 0;
    }
</style>
</head>
<body>
    <div class="record"></div>
</body>
<script>
    const dom = document.querySelectorAll('.record')[0]
    console.log(dom)
    const domObj = dom.getBoundingClientRect()
    console.log(domObj)
</script>
</html>

上面代码得到的UI和控制台打印如下:
在这里插入图片描述
我们通过查阅Can I Use可以知道，虽然getBoundingClientRect兼容性还可以，但是在IE上还是有所区别的，因此，为了后续使用方便，我们自己可以基于getBoundingClientRect封装一个自己的兼容IE的获取dom元素位置的方法

function GetDomPosition(dom) {
    const { top, bottom, left, right, height, width } = dom.getBoundingClientRect()
    return {
        top, // '元素顶部相对于视口顶部的距离',
        bottom, // '元素低部相对于视口顶部的距离',
        left, // '元素左边相对于视口左边的距离',
        right, // '元素右边相对于视口左边的距离',
        height: bottom - top || height, // 元素高度
        width:  right - left || width  // 元素宽度
    }
}

叮叮叮！！！-------------当然获取元素坐标位置宽高等信息的方法有很多，除了这篇之外，之前还写过一篇获取元素宽高和距离定位父级的距离，有兴趣的欢迎交流哦

yuan溜溜

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
getBoundingClientRect()方法获取Dom元素与浏览器窗口的位置

获取Dom元素与浏览器窗口的位置（二）----- getBoundingClientRect()方法 getBoundingClientRect()这个方法可以在不需要额外传参的情况下获取Dom元素的位置，但是值得注意的是，他获取到的位置是可视区范围的，不包括文档滚动的距离下面我们用一张图来表示他获取到的Dom元素相关信息上面的那张图让我们对getBoundingClientRect有了一个整体的初步认识，为了更加直观和细致的感受getBoundingClientRect的用法，下面我打算用一个
复制链接

扫一扫