getBoundingClientRect() 的用法

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

diligentkong

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

阅读量8.1k

点赞数 2

分类专栏： JS基础知识整理文章标签：元素位置页面位置

本文链接：https://blog.csdn.net/diligentkong/article/details/76407456

版权

JS基础知识整理专栏收录该内容

22 篇文章 1 订阅

订阅专栏

getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。
来看个例子：

<style>
         *{
            margin: 0;
            padding: 0;
         }
            #box1{
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 100px;
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>

    </body>
</html>
<script>
    var box1 = document.getElementById("box1");
    var rect = box1.getBoundingClientRect();
    console.log(rect.top);

</script>

输出结果：
这里写图片描述

这里写图片描述
要想单独输出left top right bottom的值，可以这样


console.log(box1.getBoundingClientRect().left); // 元素左边距离页面左边的距离
    console.log(box1.getBoundingClientRect().top);// 元素上边距离页面上边的距离
    console.log(box1.getBoundingClientRect().right); // 元素右边距离页面左边的距离
    console.log(box1.getBoundingClientRect().bottom); //元素下边距离页面上边的距离

注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE7中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

document.documentElement.clientTop;  // 非IE为0，IE为2

document.documentElement.clientLeft; // 非IE为0，IE为2

兼容方法可写成：

function getClientRect(elem){
    var rect = elem.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left = document.documentElement.clientLeft;

    return{
        left : rect.left - left,
        top :  rect.top - top,
        right : rect.right -left,
        bottom : rect.bottom - top
    }
}
console.log(getClientRect(box1));

在IE7 和chrome中的输出结果如下：
这里写图片描述

有了这个方法，可以方便获取页面元素的位置。

var X =getClientRect(box1).left+document.documentElement.scrollLeft; var Y =getClientRect(box1).top+document.documentElement.scrollTop;

diligentkong

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
getBoundingClientRect() 的用法

getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。来看个例子：<style> *{ margin: 0; padding: 0;
复制链接

扫一扫