getBoundingClientRect().top 获取到的值不正确

最新推荐文章于 2025-03-17 16:18:36 发布
原创 最新推荐文章于 2025-03-17 16:18:36 发布 · 4.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js

本文介绍了一个开发者在JavaScript中遇到的问题，即在页面上正确获取的数据，在脚本执行时却失效。解决办法是将相关方法置于`window.onload`回调中，确保页面加载完毕后再进行数据获取。原因在于，过早操作可能导致数据未准备好。

问题：

在页面里获取到的是正确的，放到js里就获取不到了

解决方法：

把方法放在 window.onload = () => {} 里

原因：

因为页面还没有加载完，就开始获取top值了

 

lala1091
关注
js中getBoundingClientRect的作用及兼容方案详解
11-28
总之，`getBoundingClientRect` 是JavaScript中获取元素位置信息的强大工具，虽然在旧版浏览器中存在兼容性问题，但通过适当的代码调整，我们可以确保在各种浏览器环境下都能正确获取元素的视口相对位置。
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
getBoundingClientRect 获取的数据不正确
qq_42704945的博客
08-04 6949
然后组件就定位到了和容器组件一样的位置。需要帮这个容器组件定位到我图上的位置我还需要获取tooltip组件的大小还做运算。我在实现一个tooltip组件的时候需要在鼠标移入的时候获取当前trigger容器的位置以及tooltip组件的位置。像这样我获取这个容器的位置大小使用getBoundingClientRect这个函数是没有任何问题的数值都是准确的。问题就出现了我获取的tooltip的大小比实际的大小要小一些。解决问题我们把获取的数值除以这个scale()数值=》tooltip真实的大小了。
vue3动态获取数据时使用getboundingclientrect()无效
m0_61280181的博客
04-01 2403
在vue3中，当数据重数据库查出渲染到页面上时想要获取相关html标签位置信息时报错：TypeError: Cannot read properties of null (reading 'getBoundingClientRect'使用document.getElementById("DivShow")调用getBoundingClientRect()
微信小程序 boundingClientRect 获取元素节点位置信息不准确
LGDmar的博客
05-21 2万+
微信小程序 获取页面元素视图位置的 高度不准确，官方没有明确的给解决方式。 wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.right // 节点的右边界坐标 rect.top ...
vue中使用getBoundingClientRect()获取元素位置报错
艾丽的博客
01-04 1万+
“TypeError:this.$refs[refName].getBoundingClientRect is not a function” <el-row class="qzblgzhTable" ref="QZBLGZH"></el-row> 报错原因 将ref定义在组件上面再使用如下代码去获取其方法获取其top，则会报错 this.$refs.QZBLGZH.getBoundingClientRect().top 正确写法 <div ref="QZ
getBoundingClientRect 获取当前元素距离上下左右的距离 left right 值不准确注意
weixin_34074740的博客
04-24 2086
为什么80%的码农都做不了架构师？>>> ...
获取不到getBoundingClientRect().top的值
07-20
2. **选择的元素不存在**：检查你是否正确地选定了元素，如果元素还未添加到DOM中或者已被删除，`getBoundingClientRect()` 会返回 `null`。 3. **浏览器兼容性问题**：虽然现代浏览器普遍支持这个方法，但在一些旧...
getBoundingClientRect因为别的元素边距导致获取到的值不正确
最新发布
07-03
用户提到的问题：getBoundingClientRect因其他元素边距影响导致获取值不正确。实际上，getBoundingClientRect()返回的值是相对于视口的，并且已经包含了所有布局的影响（包括自身和祖先的margin、padding、border等...
getBoundingClientRect获取到了top位置有问题怎么解决
05-20
如果 `getBoundingClientRect()` 获取到的 `top` 位置有问题，可能是因为你的元素没有被正确地定位。以下是几种可能导致此问题的情况及其解决方法： 1. 元素没有被定位：请确保你的元素被设置了 `position` 属性，...
getBoundingClientRect()获取到都为0什么问题
06-07
当调用 `getBoundingClientRect()` 方法时，如果返回的矩形对象的所有属性（如 `top`、`left`、`width` 和 `height`）都为 0，通常是因为目标元素在文档中不可见或未正确渲染。以下是一些可能的原因： 1. **元素未...
【JS Fix】zoom 缩放导致 getBoundingClientRect 属性不准确的解决方案 (可解决 ElementUI, AntDesign 等悬浮组件偏移问题)
時陨星的博客
03-17 1643
【JS Fix】zoom 缩放导致 getBoundingClientRect 属性不准确的解决方案 (可解决 ElementUI, AntDesign 等悬浮组件偏移问题)
vue 使用getBoundingClientRect() 获取元素位置 报错
weixin_43376571的博客
06-01 1万+
vue 使用getBoundingClientRect() 获取元素位置 报错Uncaught TypeError: Cannot read property ‘getBoundingClientRect’ of undefined 在mounted生命周期注册事件 mounted () { window.addEventListener('scroll', this.handleScroll, true) } 在methods里面监听使用 handleScroll () {
getBoundingClientRect()获取元素相对浏览器视窗的坐标值
dayanwu2842的博客
04-04 158
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body{height:1000px; margin:0; padding:0; border:5px solid green; background:#99...
JavaScript中的getBoundingClientRect
路在脚下，幸福在手中，莫贪！！！！！
11-20 624
JavaScript中的getBoundingClientRect getBoundingClientRect获取元素位置  getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。该函数返回一个Object对象，该对象有6个属性：to
getBoundingClientRect函数获取视图位置的坑
YICONGITSME的博客
05-11 6751
最近在做一个功能，把新手引导的提示定位在申请的上方，申请的位置是会根据前面功能的不展示而向前移动的，所以位置是不固定的，因此新手引导的位置要根据申请元素的位置来定位。 我使用了getBoundingClientRect函数来获取申请dom元素距离视图的距离。 getTypeHighLightDom(item) { const dom = document.querySelector(item.selector); let domLocal; ...
Vue获取元素位置 getBoundingClientRect is not a function
热门推荐
小划乐的博客
02-21 2万+
点击input获取该元素位置 一开始使用 ref 获取dom元素，然后调用getBoundingClientRect()方法 &lt;div @click="getInput" &gt; &lt;Input type="text" readonly="readonly" ref="inputDom"&gt;&lt;/Input&gt; &lt;/div&
【我不熟悉的javascript】display:none/v-show=“false“的元素，使用getBoundingClientRect获取的各项值都为0
有一棵树的博客
09-26 1833
【我不熟悉的javascript】display:none/v-show="false"的元素，使用getBoundingClientRect获取的各项值都为0
Vue中使用Element 第一次打开el-dialog获取不到元素的解决办法
学习 记录 总结 分享
05-10 2232
二、this.$nextTick(callback) 三、@opened opened是Dialog对话框中的事件官网描述如下：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值