getBoundingClientRect方法获取元素在页面中的相对位置

最新推荐文章于 2023-06-14 17:01:41 发布

转载最新推荐文章于 2023-06-14 17:01:41 发布 · 258 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jofun/p/8945409.html

本文介绍了如何使用getBoundingClientRect方法获取页面元素的位置，包括该方法的基本用法、返回值以及在不同浏览器中的兼容性情况。

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

获取元素位置可以用 offset 或 getBoundingClientRect，使用 offset 因为兼容性不好，比较麻烦，offset获取位置会形成“回溯”。而 getBoundingClientRect 方法则
兼容性较好，基本所有的浏览器都支持了，且使用起来更容易和简单。

1.使用语法：

element.getBoundingClientRect();

方法中没有任何参数，返回值为对象类型。

2.在IE8及以下的浏览器中，返回值对象包含的属性值有：

top:：元素上边缘距离文档顶部的距离；

right： 元素右边缘距离文档左边的距离；

bottom：元素下边缘距离文档顶部的距离；

left：元素左边缘距离文档左边的距离；

3.在IE9以上、谷歌、火狐等浏览器中，返回值对象包含的属性值有：

top： 元素上边缘距离文档顶部的距离；

right：元素右边缘距离文档左边的距离；

bottom：元素下边缘距离文档顶部的距离；

left：元素左边缘距离文档左边的距离；

width：元素的宽度（包含 padding 和 border）

height：元素的高度（包含 padding 和 border）

4.在IE8及以下浏览器没有 width 和 height 属性的解决方法：

在IE8及以下浏览器中，可以通过计算得到元素的宽和高：

如：

var dom = document.querySelector("#demo"),
r = dom.getBoundingClientRect();

var width = r.right - r.left;
var height = r.bottom - r.top;

转载于:https://www.cnblogs.com/jofun/p/8945409.html