开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

getBoundingClientRect()返回0，我哪里做错了？

getBoundingClientRect()是一个用于获取元素位置和尺寸信息的方法。当调用该方法返回0时，可能是以下几个原因导致的：

元素不存在或未正确获取：请确保你正确获取到了目标元素，并且元素已经被正确加载到页面中。
元素尚未渲染完成：在DOM加载完成后，浏览器需要一定时间来渲染页面元素。如果在元素渲染完成之前调用getBoundingClientRect()，可能会返回0。可以尝试在页面加载完成后再调用该方法，或者使用window.onload事件来确保元素已经渲染完成。
元素样式导致尺寸为0：如果目标元素的宽度或高度设置为0，调用getBoundingClientRect()可能会返回0。请检查元素的CSS样式，确保宽度和高度设置正确。
元素隐藏或不可见：如果目标元素的display属性设置为none，或者被父元素的overflow属性隐藏，调用getBoundingClientRect()可能会返回0。请确保元素可见并且没有被隐藏。
元素尚未添加到DOM树中：如果目标元素尚未被添加到DOM树中，调用getBoundingClientRect()可能会返回0。请确保元素已经被正确添加到DOM树中。

总结起来，当getBoundingClientRect()返回0时，需要检查以下几个方面：元素是否存在、是否已经渲染完成、元素的尺寸是否为0、元素是否隐藏或不可见、元素是否已经添加到DOM树中。根据具体情况进行排查和调整。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动应用开发平台（MPS）：https://cloud.tencent.com/product/mps
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙解决方案：https://cloud.tencent.com/solution/metaverse

相关搜索:getBoundingClientRect().width使用react挂钩返回0 GetModuleFileNameEx返回0，而GetLastError返回溢出错误。我做错了什么？HTML & CSS滑出导航-我哪里做错了？Laravel集合查询，我哪里出错了？Paypal IPN不断失败，我哪里做错了？TypeError: object不是函数-我哪里做错了？切换功能问题，我哪里做错了？叉子和管子，我哪里做错了？如何使用IUserIdPriver？我哪里做错了？对于图像的宽度和高度，getBoundingClientRect()返回0

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

这个语句报了无效语法的错误但是我不知道是哪里写错了

一、前言前几天在Python最强王者交流群【群除我佬】问了一个Pandas处理的问题，提问截图如下：代码如下所示： songid_tags_df['tblTags'].map(lambda x :..., x) if isinstance(x,str)) 二、实现过程后来我自己给了一个示例代码，如下所示： songid_tags_df['tblTags'].map(lambda x: re.findall...三、总结大家好，我是皮皮。这篇文章主要盘点了一个Pandas处理的问题，文中针对该问题，给出了具体的解析和代码实现，帮助粉丝顺利解决了问题。...最后感谢粉丝【群除我佬】提问，感谢【皮皮】、【瑜亮老师】、【隔壁山楂】给出的思路和代码解析，感谢【Python进阶者】、【孤独】等人参与学习交流。

6762 0

随机播放歌曲的算法，原来是这么做的，我一直都搞错了

本篇文章，我将以数组为基础，探索“在线洗牌”的原理。同时，我会以多种方式编写这个原理的代码。...，该随机数可以是负数、0 或正数。...如果返回一个正值，则认为第一个元素更大，应该放在排序数组中第二个元素之后如果返回0，则元素的相对顺序保持不变。...它返回的数字总是一个介于0到1之间的浮点数。浮点数是可以是正的或负的，并且可以有小数部分的数字，例如 3.14、-0.5、1.0、2.71828 等等。..., "elderberry"]; const shuffledArray = shuffle(myArray); console.log(shuffledArray); 不过，经过使用上面三种方法，我还是推荐

2002 0

【前端词典】4 种滚动吸顶实现方式的比较

前言我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。...我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。...后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。...我们可以自己对 offsetTop 做以下处理： getOffset: function(obj,direction){ let offsetL = 0; let offsetT = 0;...每次访问偏移量属性都需要重新计算（保存变量）；在使用的时候可能出现 DOM 没有初始化，就读取了该属性，这个时候会返回 0；对于这个问题我们需要等到 DOM 元素初始化完成后再执行。

2.5K6 0

【前端词典】4 （+1）种滚动吸顶实现方式的比较

前言我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。...我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。...后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。...我们可以自己对 offsetTop 做以下处理： getOffset: function(obj,direction){ let offsetL = 0; let offsetT = 0;...每次访问偏移量属性都需要重新计算（保存变量）；在使用的时候可能出现 DOM 没有初始化，就读取了该属性，这个时候会返回 0；对于这个问题我们需要等到 DOM 元素初始化完成后再执行。

2.1K3 0

四个真秀React用法，你值得拥有

常规实现思路 const useLayoutResize = () => { const [size, setSize] = useState({ width: 0, height: 0...仔细看useLayoutResize的实现，我们就需要在十个组件里面监听十次resize事件，然后当浏览器窗口发生变化是，需要调用十次getBoundingClientRect, 而每一次调用getBoundingClientRect...举一个我们不能保证自己写的代码一定没有bug，所以我们就需要考虑如果我们的组件代码报错了，应该怎么处理呢？...使用React.Children解决name位置问题接下来对Radio.Group的代码做一下调整export interface IProps { name: string; children:...React.isValidElement用于验证传入的是不是React Element，在前文我们在Radio.Group中有使用到这个API,因为props.children对于我们来说是不透明的，所以当我们需要对组件做某些只有

2.2K27 2

【前端词典】4 个实用有趣的 JS 特性

前言最近在学习的过程中发现了我之前未曾了解过的一些特性，发现有些很有趣并且在处理一些问题的时候可以给我一个新的思路。这里我将这些特性介绍给大家。...return ret; })(), hash: a.hash.replace('#','') };} 标记语句（label）有的时候我们会写双重 for 循环做一些数据处理...void 运算符 void 运算符对给定的表达式进行求值，然后返回 undefined。由于 void 会忽略操作数的值，因此在操作数具有副作用的时候使用 void 会更加合理。...IntersectionObserver 可以用来监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。...所以我们可以用这个特性来处理曝光埋点，而不是用 getBoundingClientRect().top 这种更加损耗性能的方式来处理。

5285 0

最快捷的Linux命令查询工具来了：「我该怎么做XX」，一句话自动返回操作指南

然后howdoi马上就能返回详细操作教程，实现了用日常对话的形式来查询Linux交互命令。 ? 这么好用的工具安装起来也不复杂。安装步骤安装howdoi只要两步，还需要PHP 5.0以上版本。...（默认为1），-v表示返回完整解答（默认情况只返回相关代码），-h为显示此问题的帮助信息。...返回多个结果输入问题「如何链接屏幕？」...，要求2个返回结果： $ howdoi -n 2 attach to a screen 返回： screenscreen -S myprogramrunningunderscreenscreen...2个结果，系统返回也给出了两种连接不同屏幕的方法。

8322 0

关于图片懒加载的几种方案

这我以前有可能是知道的，那时候我比较单纯，喜欢死磕。我现在想通了，背不过的东西就不要背了所以它有一个问题：复杂琐碎不好理解！仅仅知道它静态的高度还不够，我们还需要知道动态的如何动态？...() 方法返回元素的大小及其相对于视口的位置。..._.throttle(func, [wait=0], [options={}]) 参考什么是防抖和节流，他们的应用场景有哪些方案三再改进一下如何判断图片出现在了当前视口方案二使用的方法是:...，还可以对单页应用资源做预加载。... 方案四浏览器觉得懒加载这事可以交给自己做，你们开发者加个属性就好了。

1K1 0

图片懒加载的几种实现方式

() 获取图片相对于浏览器视窗的位置示意图如下： getBoundingClientRect() 方法返回一个 ClientRect 对象，里面包含元素的位置和大小的信息 ClientRect {...IntersectionObserver 是一个构造函数，接受两个参数，第一个参数是可见性变化时的回调函数，第二个参数定制了一些关于可见性的参数（可选），IntersectionObserver 实例化后返回一个观察器...IntersectionObserver，添加 img 出现在 viewport 瞬间的回调 const observer = new IntersectionObserver(changes => { console.log('我出现了...通过设置 option 的 threshold 改变回调函数的触发条件，threshold 是一个范围为0到1数组，默认值是[0]，也就是在元素可见高度变为0时就会触发。...通过这种方式，网站将不需要为了监听两个元素的交集变化而在主线程里面做任何操作，并且浏览器可以帮助我们优化和管理两个元素的交集变化。

2.6K2 0

图解浏览器的各种距离

你写代码的时候 ts 就报错了：那咋办呢？...这里的 getBoundingClientRect 是返回元素距离可以可视区域的距离和宽高的：而 window.pageYOffset 也叫 window.scrollY，顾名思义就是窗口滚动的距离。...返回的数值是更精确的小数，所以算出来的也是小数。...那看起来 getBoundingClientRect().height 和 offsetHeight 一模一样？绝大多数情况下是的。...但你旋转一下：就不一样了： getBoundingClientRect 拿到的包围盒的高度，而 offsetHeight 是元素本来的高度。

1221 0

5 个 JavaScript “罕见”原生的 API

这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。 ---- 本篇带来 5 个 “罕见的” JavaScriot 原生 API，谁还不是个 API 调用大师呢？...() 该Element.getBoundingClientRect()方法返回一个 DOMRect 对象，该对象提供元素大小及其相对于视口的位置信息；用法如下： domRect = element.getBoundingClientRect...的值： const h3 = document.querySelector("h3"); const rect = h3.getBoundingClientRect(); const topElement...const positionLeft = topElement.scrollLeft + rect.left; once: true once: true 可不是 API，它长得也不像 API，它是用来做属性配置的...我是掘金安东尼，输出暴露输入，技术洞见生活。

4082 0

一次DOM曝光封装历程

(); if (top > 0 && top < window.screen.availHeight) 其中这里的 top 以及其他边距对应视口计算方式可能和你想象的不一样，上图摘自你真的会用getBoundingClientRect...于是我就开启 google 大法和在掘金社区内搜一些曝光的文章，然后我就发现了新大陆！...window.IntersectionObserver 这次曝光的主角：优先使用异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法关于他的具体介绍，我这里简单讲一下我用到的属性，...返回一个布尔值，下列两种操作均会触发 callback：如果目标元素出现在 root 可视区，返回 true。...如果从 root 可视区消失，返回 false 按理说应该是使用它，但是发现不适合现实场景！！！比如类 banner 横向移动 (https://jsbin.com/vuzujiw/6/edit?

1792 0

详细设计一个文章页目录插件

首先我打算将文章的目录放置在文章内容的右侧，且是悬浮固定在那里不随浏览器的滚动而滚动。...这部分内容开始前，我们先来复习一个 API，该方法会返回元素的大小及其相对于视口的位置： Element.getBoundingClientRect() 需求分析的时候有提到，高亮的原则是当前标题所在的位置到浏览器可视区域顶部的距离需要小于或等于一个固定值...++ } } else { while (nextOnIndex >= 0) { let currTop = arContentAnchor[nextOnIndex].getBoundingClientRect...虽然经过优化后，已经明显的减少了遍历次数，但是我还想再优化一下。纳尼？...firstDdTop = firstDdTop || catalogDd[0].getBoundingClientRect().top, bodyMidBottom = initBodyTop

2.4K2 0

Canvas网页涂鸦板再次增强版

// canvas.clearRect(0, 0, 900, 600); context.lineTo(x, y);//绘制线条...context.stroke();//绘制描边 }; //当鼠标按键被松开时，onmousemovet函数返回null...(); //绘制描边 }; //当鼠标按键被松开时，onmousemovet函数返回null canvas.onmouseup =.../html> 实现效果第三版Canvas涂鸦板实现功能：实现涂鸦时上一步和下一步的功能（撤回）实现选择画布颜色的功能实现对涂鸦的涂鸦板生成图片实现思路：后退和前进（撤回）功能，我的想法是每画一次就将整个画布的数据...(); //绘制描边 }; //当鼠标按键被松开时，onmousemovet函数返回null //注意，要用document全局监听

1.2K3 0

jQuery源码解析之position()

position() 作用：返回被选元素相对于父元素（parent）的偏移坐标使用：直接调用$().position()即可，该方法没有 arguments（参数对象）这是divTwo $("#pTwo").position() //{top: 0, left...: 8} 源码： // 返回被选元素相对于父元素（parent）的偏移坐标 // 可以理解成被选元素设置为absolute， // 然后设置left...this[ 0 ] ) { return; } var offsetParent, offset, doc, elem = this[ 0 ],...parentOffset = { top: 0, left: 0 }; // position:fixed elements are offset from the viewport

6001 0

js判断元素在某个区域内是否可见（转）

getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置...该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高...getBoundingClientRect()最先是IE的私有属性，现在已经是一个W3C标准。...所以你不用当心浏览器兼容问题，不过还是有区别的：IE只返回top,lef,right,bottom四个值，不过可以通过以下方法来获取width,height的值 var ro = object.getBoundingClientRect...el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 &&

7.6K2 0

clientWidth，offsetWidth，scrollWidth你分的清吗

---- 前言最近在开发时遇到这样一个需求，一个表单列表报错后，滚动表单到能展示报错元素，做的时候发现clientWidth，offsetWidth，scrollWidth这几个概念自己有时候还是会弄混...定位，直到找到body，并且即使元素会被滚动，这个值也不会改变 scrollWidth/scrollHeight scrollWidth/scrollHeight 返回值包含 content + padding...在没有滚动条时scrollTop==0。...getBoundingClientRect() 它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离...; 　var Y = node.getBoundingClientRect().top+node.scrollTop; 一个demo加深印象有一个列表，当我们输入文段编号，列表会将选中文段滚动到视图中

2K1 0

HTML5、JS实现元素拖拽排序

= target.getBoundingClientRect(); var dragingRect = draging.getBoundingClientRect();...(); //nodeType 属性返回以数字值返回指定节点的节点类型。...target, 'transition', 'all ' + ms + 'ms'); // _css(target, 'transform', 'translate3d(0,0,0...target, 'transform', 'translate3d(0,0,0)'); clearTimeout(target.animated); target.animated...'' : 'px'); } } }我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

4716 0

getBoundingClientRect使用指南

getBoundingClientRect Element.getBoundingClientRect() 含义：方法返回元素的大小及其相对于视口的位置。...值：返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。...注意：如果所有的元素边框都是空边框，那么这个矩形给该元素返回的 width、height 值为0，left、top值为第一个css盒子（按内容顺序）的top-left值。...// 获取dom元素相对于网页左上角定位的距离 function offset(el) { var top = 0; var left = 0; // 获取元素的位置还有getBoundingClientRect...if (top 0) { return true; } else if (top >= se || bottom <= 0) {

1.4K4 0

10.8 如何用js验证一下boz-sizing样式对块级盒子大小的影响？

document.querySelector("#medium").getClientRects()[0].width document.querySelector("#thick").getClientRects...()[0].width 使用getBoundingClientRect验证返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的...返回接口与上面的方法是一样的。另外，使用clientWidth查看内部宽度 Element.clientWidth 属性表示元素的内部宽度，以像素计。...从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。...著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。

9854 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭