getBoundingClientRect的用法

不念不忘少年蓝@ 2021-06-26 16:06 684阅读 0赞

`getBoundingClientRect`用于获取某个元素相对于视窗的位置集合。集合中有`top, right, bottom, left`等属性。

**1.语法：这个方法没有参数。**

rectObject = object.getBoundingClientRect();

**2.返回值类型：`TextRectangle`对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位。**

*  `rectObject.top`：元素上边到视窗上边的距离;
 *  `rectObject.right`：元素右边到视窗左边的距离;
 *  `rectObject.bottom`：元素下边到视窗上边的距离;
 *  `rectObject.left`：元素左边到视窗左边的距离;

示图：  
![在这里插入图片描述][20190504120314883.png]  
**3. 兼容性：我用ie11的Document Mode模式测试，ie5以上都能支持。**

PC端:  
![在这里插入图片描述][20190504120329516.png]  
Mobile端:  
![在这里插入图片描述][20190504120345612.png]  
**4.`width`和`height`：ie9以上支持`width/height`属性。**

兼容ie6~ie8的`width/height`的写法：

var rectWidth = rectObject.right - rectObject.left;
        rectHeight = rectObject.bottom - rectObject.top;

**5.在ie7及ie7以下left和top会多出两个像素。**

ie7下测试：  
![在这里插入图片描述][20190504120521533.png]  
chrome下测试：  
![在这里插入图片描述][20190504120528115.png]  
在百度经验下找到`document.documentElement`在ie7及ie7以下会多出两个像素。为了搞明白`document.documentElement`是什么？我把它的`tagName`打印出来。

ie7下：  
![在这里插入图片描述][20190504120604137.png]  
在ie7及ie7以下的html元素坐标会从(2, 2)开始算起，在ie8已经修复了这个bug。这就是多出两个像素的原因。下面我们做下兼容：

var    rectLeft = rectObject.left - document.documentElement.clientLeft || 2;
        rectRight = rectObject.right - document.documentElement.clientLeft || 2;
        rectBottom = rectObject.bottom - document.documentElement.clientTop || 2;
        rectTop = rectObject.top - document.documentElement.clientTop || 2;

[20190504120314883.png]: /images/20210626/57762642265846589d62d9f8855a44ee.png
[20190504120329516.png]: https://img-blog.csdnimg.cn/20190504120329516.png
[20190504120345612.png]: https://img-blog.csdnimg.cn/20190504120345612.png
[20190504120521533.png]: https://img-blog.csdnimg.cn/20190504120521533.png
[20190504120528115.png]: https://img-blog.csdnimg.cn/20190504120528115.png
[20190504120604137.png]: https://img-blog.csdnimg.cn/20190504120604137.png

发表评论取消回复

表情：

评论列表（有 0 条评论，684人围观）

还没有评论，来说两句吧...

相关阅读

相关 document.documentElement.getBoundingClientRect

getBoundingClientRect() 来获取页面元素的位置 document.documentElement.getBoundingClientRect

淡淡的烟草味﹌/ 2022年06月17日 21:09/ 0 赞/ 195 阅读

相关 getClientRects 和 getBoundingClientRect 的用法和区别

getClientRects获取元素占据页面的所有矩形区域描述获取元素占据页面的所有矩形区域。语法 var rectCollect

素颜马尾好姑娘i/ 2022年06月08日 01:50/ 0 赞/ 322 阅读

相关 element.getBoundingClientRect();进行获取高度

function getBoundingClientRect (element) { var rect = element.getBoundingClien

川长思鸟来/ 2022年05月23日 01:28/ 0 赞/ 265 阅读

相关 getBoundingClientRect在IE9/10里的bug

getBoundingClientRect可以获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，最早在[IE][]中实现，后其它浏览器均已实现。但它在IE9,10

秒速五厘米/ 2022年03月31日 04:16/ 0 赞/ 361 阅读

相关 js getBoundingClientRect()

> getBoundingClientRect() > > 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面

左手的ㄟ右手/ 2022年02月22日 20:33/ 0 赞/ 249 阅读

相关 js的getBoundingClientRect()

getBoundingClientRect()：获取元素位置，该方法没有参数。 <div id="box"></div> var object=do

布满荆棘的人生/ 2021年12月11日 20:49/ 0 赞/ 337 阅读

相关 js中getBoundingClientRect()方法详解

一.getBoundingClientRect()分析 getBoundingClientRect()获取元素位置，这个方法没有参数 getBoundingClien

àì夳堔傛蜴生んèń/ 2021年09月15日 10:54/ 0 赞/ 555 阅读

相关 getBoundingClientRect的用法

`getBoundingClientRect`用于获取某个元素相对于视窗的位置集合。集合中有`top, right, bottom, left`等属性。 1.语法：这个方法没

不念不忘少年蓝@/ 2021年06月26日 16:06/ 0 赞/ 685 阅读

相关 ${ }的用法

假設我們定義了一個變量為： file=/dir1/dir2/dir3/my.file.txt 我們可以用 ${ } 分別替換獲得不同的值： ${file#*/}：拿掉第一...

朱雀/ 2021年04月23日 15:08/ 0 赞/ 935 阅读

相关 getBoundingClientRect() 方法

getBoundingClientRect() 方法 JavaScript对dom操作的所有方法使用方式都是非常简单的。难点在于理解此方法具体的作用什么，如果了解它的实...

红太狼/ 2020年05月26日 15:41/ 0 赞/ 779 阅读