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

本文介绍了如何使用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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值