获取dom距离窗口距离getBoundingClientRect

getBoundingClientRect详解
最新推荐文章于 2025-07-06 22:05:51 发布
原创 最新推荐文章于 2025-07-06 22:05:51 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了getBoundingClientRect方法，该方法用于获取元素相对于视窗的位置信息，包括距离视窗顶部、底部、左侧和右侧的距离。通过这些信息，开发者可以精确地定位页面上的元素。

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

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

objVal = object.getBoundingClientRect();

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

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

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

　objVal.left：元素左边到视窗左边的距离;

快速获取dom到body左侧和顶部的距离，简单粗暴无bug-getBoundingClientRect
qq_35436516的博客
09-23 3724
获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。 下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。 这个方法就是 getB...
获取元素距离浏览器周边的位置的方法getBoundingClientRect
09-08
在JavaScript中，`getBoundingClientRect()` 是一个非常实用的DOM元素方法，它允许开发者获取到一个元素相对于视口（浏览器窗口）的几何信息，包括元素的顶部、底部、左侧和右侧距离浏览器边缘的具体数值。...
原生js获取 一个dom元素距离页面可视区域的位置值
wys997的博客
07-23 2838
这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 var box=document.getElementById(‘box’); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离 alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离 alert(box.getBoundingClientRe
getBoundingClientRect() 详解：精准获取元素位置和尺寸
记录来时的路
07-06 612
getBoundingClientRect()是JavaScript中获取元素几何信息的核心API，返回包含坐标、尺寸等属性的DOMRect对象。它相对视口计算位置，包含边框和内边距，常用于元素定位、滚动检测、拖拽实现等场景。与offsetTop等属性相比，它提供更全面的几何数据但性能开销较大。文章详细解析了其属性、应用实例、性能优化技巧及浏览器兼容性方案，是前端开发中处理元素位置尺寸问题的必备工具。使用时需注意避免频繁调用以防性能问题。
DOM之getBoundingClientRect() 方法
Andy·Wu的专栏
03-14 2263
使用 getBoundingClientRect() 返回的是对象，其包含： x，y，top，bottom，left，right，width，height。 这些值的具体含义为： x,y ：表示元素左上角距离视窗的坐标 width、height ：表示元素的框和高（= text 的高度 + border + padding） 注意：下面 4 个属性的...
JS获取 某一个DOM元素距视窗的位置信息
fth1002853070的博客
09-03 1035
我们可以调用getBoundingClientRect方法，来获取，一个Dom元素距离视窗的各种信息。 详见：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect var aDiv = document.getElementById('aDiv'); console.log(aDiv.getBo...
js dom操作 获取距离
paradoxaaa_的博客
10-10 735
//整个DOM部分 在页面任意地方点击 document.onclick=function () { alert(document.documentElement.clientWidth) alert(document.documentElement.clientHeight) //document.documentElement 测宽高固定写法 不会把滚动条计算进去...
vue 获取dom已滚动距离
03-26
### Vue 中获取 DOM 元素的已滚动距离 在 Vue.js 中，可以通过 JavaScript 原生方法结合 Vue 的生命周期钩子来实现对 DOM 元素已滚动距离的计算。以下是具体实现方式： #### 使用 `getBoundingClientRect()` 方法 ...
获取 某个 dom节点的滚动距离
最新发布
09-05
明确问题：获取DOM节点的滚动距离（内部滚动）。 2. 解决方案：使用元素的scrollTop和scrollLeft属性。 3. 示例代码。 4. 注意事项（如需要事件监听等）。 5. 生成相关问题。 注意：如果用户想要的是整个文档...
vue 获取元素到窗口的上下左右距离
05-13
在Vue中获取元素相对于窗口的上下左右距离，可以通过原生DOM的$getBoundingClientRect()$方法实现。以下是具体实现步骤： ### 一、基础实现方法 ```javascript // 1.在模板中声明元素引用 需要测量的元素 // 2....
vue 获取元素到窗口底部的距离
10-16
在Vue.js中，获取某个元素距离浏览器窗口底部的距离通常需要结合JavaScript来计算。你可以使用`Intersection Observer API`或者简单的JavaScript DOM操作来实现。这里提供一个基本示例： 1. 使用Intersection ...
DOM元素的距离属性
m0_46582836的博客
02-15 603
offsetTop //返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。 所谓`在这里插入代码片`的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。 1 offsetLeft //此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。 scrollLeft //此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也
JQueryDOM距离屏幕部位的距离
热门推荐
mrlal
02-24 13万+
<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px"> <div style="width:60%;border-right:1px dashed red;float:left;"> <div style="float:left;"> ..
DOM-5 【滚动距离与高度-可视尺寸-兼容模式】
Yesterday_Tomorrow的博客
11-16 385
一.滚动距离与高度 (1).查看滚动条的距离 常规 window.pageXOffset/pageYOffset IE9/IE8及以下 怪异:document.body.scrollLeft/scrollTop 标准:document.documentElement.scrollLeft/scrollTop 两者只能存其一 不常见 window.scrollx/scrolly 二.可视尺寸(窗口的宽高) (1).可视窗口尺寸 常规 window.innerWid
js 获取当前元素距离窗口的距离
yuange
01-15 2万+
获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。 这个方法就是 ge...
TypeScript中使用getBoundingClientRect报错Property 'x' does not exist on type 'ClientRect | DOMRect
前端知识总结
05-08 1890
内容参考github ts问题11085 DomRect之前叫ClientRect，后来更名了1， ts兼容了两种对象，但ClientRect没有x,y属性。所以使用getBoundingClientRect时： ​let unspecifiedRect = document.body.getBoundingClientRect(); unspecifiedRect.x // fails let ...
getBoundingClientRect介绍及使用场景
weixin_43162494的博客
12-02 707
getBoundingClientRect是一个 DOM 元素的方法，用于获取元素相对于视口（viewport）的位置和尺寸信息。它返回一个DOMRect对象，这个对象包含了元素的左上角和右下角的坐标（相对于视口），以及元素的宽度和高度等属性。
DOM学习实用路线（11）——DOM元素的尺寸获取-获取页面及可视区的绝对位置
xiao廸要飞
04-10 988
元素的尺寸获取 getBoundingClientRect() left 元素左侧距离可视区左侧距离 top 元素顶部距离可视区顶部距离 right 元素右侧距离可视区左侧距离 bottom 元素底部距离可视区顶部距离 width 可视宽度 height 可视高度 元素相对可视区的位置（不太兼容） <!DOCTYPE html> <html l...
原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect
04-13 1514
getBoundingClientRect() 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值