getBoundingClientRect() 与 offset

最新推荐文章于 2025-10-29 12:05:52 发布

原创最新推荐文章于 2025-10-29 12:05:52 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

总结笔记专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Element.getBoundingClientRect()方法，该方法用于获取元素的大小及其相对于视口的位置。具体包括返回值的各个属性如top、right、bottom、left、width及height的含义，以及与offset系列属性的区别。

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置

语法
rectObject = object.getBoundingClientRect();
返回值：
返回 4个方向值与 2个宽高值

rectObject.top：元素上边到视窗上边的距离;

rectObject.right：元素右边到视窗左边的距离;

rectObject.bottom：元素下边到视窗上边的距离;

rectObject.left：元素左边到视窗左边的距离;
rectObject.width：元素的宽度 （内容区+padding+border+滚动条）
rectObject.height：元素的高度 （内容区+padding+border+滚动条）

在这里需要注意的是：
right 方向的值是基于元素右侧边框到可视区左边的距离
bottom方向的值是基于元素底部到可视区顶部的距离

兼容性
方向值可兼容到ie7+；
宽高值兼容到ie9+;

对比
offset 的方向值需要考虑到父级，如果父级是定位元素，那么子元素的offset值相对于父元素，如果父元素不是定位元素，那么子元素的offset值相对于可视区窗口。
getBoundingClientRect() 的值只相对于可视去窗口。