JS 中getBoundingClientRect()的用法

最新推荐文章于 2024-03-30 11:17:31 发布
原创 最新推荐文章于 2024-03-30 11:17:31 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种通过JavaScript获取页面元素位置的方法，并提供了一个简单的示例。该方法使用`getBoundingClientRect()`结合滚动偏移量来确定元素的具体位置。

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

下面的代码举了个简单的例子，可以滚动滚动条之后点红色区域看各个值的变化。 Demo
Demo为了方便就直接用绝对定位的元素
有了这个方法，获取页面元素的位置就简单多了， var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
haoxiang110
关注
JS | 元素视图方法之getBoundingClientRect()方法详解，秒懂！
青春木鱼的博客
10-16 7743
在前端开发过程中，我们经常需要获取HTML元素的尺寸和位置信息。getBoundingClientRect()方法就是一个非常重要的工具，它可以帮助我们获取元素的大小及其相对于视口的位置。
js getBoundingClientRect() 来获取页面元素的位置
12-03
document.documentElement.getBoundingClientRect 下面这是MSDN的解释： Syntax oRect = object.getBoundingClientRect() Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels. Remarks This met
js中getBoundingClientRect()方法详解
热门推荐
汉堡请不要欺负面条
05-18 13万+
一.getBoundingClientRect()分析getBoundingClientRect()获取元素位置，这个方法没有参数getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。 该函数返回一个Object对象，该对象有6个属性：...
js中getBoundingClientRect( )方法
stay_少年的博客
05-24 717
js中getBoundingClientRect( )方法 一.getBoundingClientRect() 解析 getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
js getBoundingClientRect()
chen1042246612的博客
04-06 429
getBoundingClientRect() 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); ...
js中getBoundingClientRect()
weixin_52139966的博客
05-22 370
js中getBoundingClientRect(): getBoundingClientRect()获取元素位置，没有参数 getBoundingClientRect()用于获得页面中某个元素的上下左右分别相对浏览器视窗的位置。 getBoundingClientRect()是DOM元素到浏览器可视范围的距离 (一)基本使用: 可用于瀑布流页面数据加载时 document.getElementById('demo').onclick=function (){ if (documen
getBoundingClientRect()
03-27 1543
html的对象可以通过getBoundingClientRect()取得其真实位置 ： html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>无标题文档title>head>body>table width="200" border="1">  tr>    td>&nb
js中getBoundingClientRect()方法
qq_42931285的博客
03-04 1031
js中getBoundingClientRect()方法
超详细分析！！！秒懂getBoundingClientRect()
weixin_61597234的博客
12-08 1万+
作用：用来获取元素的位置以及大小相关的信息。是DOM元素的一个方法，返回一个DOMRect对象，包含元素的大小及其相对于视口的位置。bottom:元素底部距离......
你不知道的Js高级方法
weixin_53841730的博客
08-01 277
IntersectionObserver 是一个构造函数，可以接收两个参数，第一个参数是一个回调函数，第二个参数是一个对象。这个方法用于观察元素相交情况，它可以异步地监听一个或多个目标元素与其祖先元素或视口之间的交叉状态。特殊场景会用上，比如你登录了淘宝的网页，当你下拉滑块的时候，下面的图片不会立即加载出来，有一个懒加载的效果。是一个用于获取元素位置和尺寸信息的方法。这个方法通常用于需要获取元素在视口中的位置和尺寸信息的场景，比如实现拖拽、定位或响应式布局等，兼容性很好，一般用滚动事件比较多。
js getBoundingClientRect
yanlingdi的博客
05-27 412
getBoundingClientRect返回一个矩形对象，分别包括 top right bottom left 四个属性。表示元素各边与页面上边与左边的距离。 var box = document.getElementById(‘#box’); alert(box.getBoundingClientRect().top) //元素上边距离页面上边的距离 alert(box.getBoun
getBoundingClientRect 获取元素位置和大小
呆呆狗
03-30 1365
getBoundingClientRect() 是一个用于获取元素位置和大小的方法。它返回一个 DOMRect对象，其提供了元素的大小及其相对于视口的位置，
js中 getBoundingClientRect()
最新发布
07-26
JavaScript 中的 `getBoundingClientRect()` 方法是一个非常实用的 API，用于获取一个元素相对于视口的位置信息。该方法返回一个包含 `top`、`right`、`bottom`、`left`、`width` 和 `height` 等属性的对象，这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值