vue dom渲染完成后 无法获取高度

TO_WebNow TO_WebNow 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.2k累计阅读 1.2k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄8年
关注
原创 最新推荐文章于 2026-05-09 06:36:26 发布 1.2k 阅读 AI 写同款· GEO 优化 ›
Vue中获取DOM元素高度的方法 在Vue中，可以通过使用ref属性给DOM元素添加一个引用，然后通过$refs对象来获取该DOM元素的引用。通过引用可以获取DOM元素的高度。在Vue中，我们经常需要获取DOM元素的高度，以便进行一些自定义的样式或布局操作。下面介绍几种常用的获取DOM元素高度的方法。这是几种常用的在Vue中获取DOM元素高度的方法。根据实际情况选择合适的方法来获取DOM元素的高度，以便进行后续的操作。我们可以利用计算属性来获取DOM元素的高度。有时候，DOM元素的高度可能在Vue实例的更新周期之后才能获取到。 阅读详情

在dom渲染完成后想要获取该元素的高度时 发现为0

解决办法:
在这个生命周期里添加获取高度的代码

   updated () {
        this.$nextTick(() => {
            this.contentHight = this.$refs.content.offsetHeight
        })
    },
收录于
Vue

当前文章被收录于：

Vue
45 篇文章 0 人学习

vue常见问题

订阅专栏 查看详情
标签
#vue.js #javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
火狐在用offsetHeight获取div的高度时为0的解决方法 火狐在需要获取div的高度时，往往需要用到offsetHeight，有时会碰到offsetHeight获取到为0的现象， 在使用IE或者火狐中，特别在目前div+css的方式，往往不定义div的高度，这是在添加div内容后，需要获取div的高度时，往往需要用到offsetHeight。 在使用中，有时会碰到offsetHeight获取到为0的现象，但如果你用各种JS调试工具调试，又能在对象中看到值（如果直接指向offsetHeight是没值的，但如果是对象查看是有值的，在调试器中回车查看对象就已经刷新对象了，所以有值。） 比如下面片段 代码如下: 复制代码代码如下: <!DOCTYPE 立即下载

相关推荐

从理论到代码：手把手教你用Matlab复现MMC的HSS阻抗模型（附避坑指南）

本文详细介绍了如何使用Matlab复现MMC的HSS阻抗模型，涵盖谐波状态空间（HSS）理论、代码实现步骤及常见问题解决方案。通过谐波线性化和序阻抗建模技术，帮助工程师准确分析MMC的阻抗特性，并提供避坑指南以解决矩阵维度错误、收敛性问题和频域转换陷阱等难点。

weixin_42561040的博客 357

关于scrollHeight和scrollTop取值为0的问题

js:关于scrollHeight和scrollTop取值为0的问题 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，单位像...

qq_31965515的博客 7476

S32K344 Flash Driver实战：手把手教你实现任意字节写入与扇区解锁（含C40_Ip避坑指南）

本文深入解析S32K344微控制器的Flash驱动开发，重点解决C40_Ip驱动库的8字节对齐限制和扇区保护锁问题。通过实战案例和代码示例，详细介绍了如何实现任意字节写入、扇区解锁及性能优化策略，为Bootloader和OTA升级等应用提供可靠解决方案。

weixin_33713707的博客 432

获取officewidth,height；clientwidth,height scrollwidth,height.......等,结果为0的原因

officewidth,height;clientwidth,height scrollwidth,height 等 这类属性只有在渲染完成后,生成DOM树才能获取到值,如果没渲染就获取,值始终为0 注意: 内联元素 如span等 , 没有这些值; 解决方法: 调整 获取这类值的代码 的执行顺序,将其放在页面渲染完成后执行! ...

weixin_44447804的博客 729

RK3566基于Buildroot定制QT开发环境的完整指南

本文详细介绍了如何在RK3566开发板上使用Buildroot定制QT开发环境的完整流程。从基础环境搭建、Buildroot初始配置到QT模块选择与编译验证，提供了实战经验和常见问题解决方案，帮助开发者高效完成嵌入式Linux下的QT开发环境部署。

weixin_26804345的博客 358

手把手教你用RV1103+SC3336摄像头DIY一个离线人脸门禁原型

本文详细介绍了如何利用RV1103芯片和SC3336摄像头构建离线人脸门禁系统。从硬件选型到算法优化，再到业务逻辑实现，提供了完整的DIY指南。重点讲解了RetinaFace和FaceNet算法在嵌入式系统中的移植与调优，帮助开发者快速实现高效、隐私安全的门禁解决方案。

weixin_26905487的博客 509

vue通过ref获取元素高度，结果undefined

通过this.$refs.element成功获取元素，但this.$refs.element.offsetHeight等方法获取结果为undefined。解决方法：添加$el，通过this.$refs.element.$el.offsetHeight获取。this.$refs无法获取元素，考虑this指向是否为vue实例，dom元素是否正确绑定ref。

m0_63477273的博客 4067

Windows 上 openclaw onboard --install-daemon 命令的安装位置和启动配置

摘要：Windows系统中，执行openclaw-cnonboard--install-daemon命令会创建计划任务OpenClawGateway，该任务在用户登录时自动运行位于%USERPROFILE%.openclaw\gateway.cmd的脚本文件来启动服务。管理方法包括通过任务计划程序或命令行(schtasks)查看/启停任务，使用openclaw gateway命令操作服务，或通过删除计划任务和脚本文件完全卸载服务。该机制确保OpenClawGateway服务随系统登录自动启动。（149字）

大坡3D软件开发 1375

uniapp和vue在页面数据渲染完毕之后再获取高度

在使用vue或者uniapp时，有时候需要在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表数据高度的时候，由于数据没有加载完，获取不到准确的高度。需要注意的是，当用户一进页面就滑动的时候，我们获取的高度也会发生变化。当下图中上部分的classifyList分类数据渲染完毕之后，获取一遍tab选项卡距离页面顶部的距离，有了这个距离进行其他操作；用于观察Vue实例上的数据变化，对应一个对象，键是需要观察的表达式，值是对应的回调函数。在修改数据之后立即使用这个方法，获取更新后的 DOM。

铁锤妹妹的博客 4646

开源推荐：5个最实用的AIGC风格迁移项目

随着人工智能技术的飞速发展，AIGC（人工智能生成内容）领域取得了显著的成果。风格迁移作为AIGC中的一个重要分支，旨在将一种图像的风格应用到另一种图像上，创造出具有独特艺术效果的新图像。本文的目的是为读者推荐5个最实用的AIGC风格迁移开源项目，详细介绍这些项目的技术原理、使用方法和应用场景，帮助读者在实际项目中选择合适的工具进行风格迁移。文章的范围涵盖了这些项目的核心概念、算法原理、数学模型、项目实战以及相关的学习资源和未来发展趋势等方面。

AI 原生应用开发的博客 1704

24、汽车黑客技术全解析：诊断代码、车库创建与系统攻防

本文深入探讨了汽车黑客技术的核心内容，包括诊断代码模式与参数ID、创建开放车库社区、汽车系统相关技术、硬件与软件工具、攻击与防御手段，以及车辆通信与网络安全。无论你是汽车安全研究人员、爱好者还是开发者，都能从中获取全面的技术解析与实践指南。

Apple的专栏 228

vue获渲染页面后获取内容高度

页面使用了组件，渲染完之后获取到的高度明显不对，原来写在mounted里getHeight()获取不到。 解决办法： 用$nextTick Vue.nextTick( [callback, context] ) 法一： 在请求成功之后调用： this.$nextTick(() => { this.getHeight(); }); 我用了这种可以使用。 法二：假如法一拿不到，就用watch 当获请求成功获取到值（监测到值发生变化）之后，调用$nextTick 参考： vue中如何获取元素正确的宽

qq_43437571的博客 2981

5分钟快速上手：用AI生成3D虚拟场景的保姆级教程

你是否想过：不用学复杂的3D建模软件，不用懂“多边形”“UV贴图”这些专业术语，也能快速生成一个梦幻的森林、未来感的城市，甚至外太空基地？本文的目的就是教完全没接触过3D技术的新手，用AI工具5分钟生成3D虚拟场景。我们会覆盖主流AI工具的选择、提示词编写技巧、生成后的简单调整，以及常见问题解决。本文会像“游戏任务指南”一样，从“认识工具”→“写提示词”→“生成场景”→“调整优化”逐步讲解，最后还会教你把生成的3D场景用起来！提示词：你给AI的“订单备注”，越详细效果越好。扩散模型。

AI 原生应用开发的博客 1963

解决vue3+echarts关于无法获取dom宽度和高度的问题

不过还有个问题得说一下，很明显，我用了elementplus作为UI框架，我特别喜欢el-card这个组件，所以很多时候我都用它来做布局，但是我在用的时候，发现我很难掌握它的布局规律，尤其是在结合echarts画图的时候，各种dom相关的问题层出不穷，所以我不得不放弃使用el-card，二是自己用div来做布局。第二个报错是说不能获取到echarts对应dom的宽或高，这个问题一般出现在设置dom节点的宽和高时，用了百分比形式，ECharts的宽高默认是以像素为单位的，并不能直接使用百分比来设置。

黄钢的博客 9861

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

vue中nextTick的实际应用

vue中nextTick的实际应用 简单来说就是：页面数据渲染完成之后再调用 在使用Vue框架的时候，有时候需要在Vue在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表的高度的时候，由于数据没有加载完，获取不到准确的高度。之前在使用jquery的时候，有ready可以帮助我们实现，但是Vue不存在此类方法，我们需要结合watch和nextTick来实现。 nextTick：在下次 DOM 更新循环结束之后执行延迟回调 watch：用于观察Vue实例上的数据变动 对应一个对象 键是观

monkey7 285

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员，提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列，各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性，请参见数据手册。有关 ARM Cortex™-M4F 内核的信息，请参见《Cortex™-M4F 技术参考手册》。

MutationObserver -- 判断vue Dom渲染完成

MutationObserverMutationObserver -- 判断vue Dom渲染完成MutationObserver 作用方法应用实例 MutationObserver – 判断vue Dom渲染完成 获取想要获取dom元素的宽高,打印出来的结果值一直小于DOM元素本身高度。查阅很多资料无果，初步判断是vue升级以后，this.$nextTick监听方式发生改变。 更改方案，...

weixin_41801013的博客 5496

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件，这是C++版本的破解文件

vue如何获取div的宽度_vue获取dom元素高度的方法

获取DOM高度：要在钩子mounted里面dom结构生成后去获取dom的高度，宽度，修改样式等操作(参照生命周期钩子mounted语法：https://cn.vuejs.org/v2/api/#mounted)mounted() {let h = window.innerHeight || document.documentElement.clientHeight || document.body...

weixin_39815031的博客 1万+

Vue中获取高度的方法

一.Vue 中获取滚动条高度的方法 <script type="text/Babel"> mounted() {//可以在这里面直接进行滚动条的获取 window.addEventListener('scroll', this.getTopHeight , true) } methods: { getTopHeight () { //方法...

Meng_qi8816的博客 6031

vue中$nextTick的用法(视图渲染完，操作dom)

vue是非常流行的框架，他结合了angular和react的优点，从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也用过。我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要...

muzidigbig的博客 1万+

Vue异步获取数据后获取Dom元素的高度

vm.$nextTick( [callback] ) 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

qq_41671718的博客 2081

vue.js数据渲染完成后，获取页面高度问题

获取整个页面的高度用的$(document).height(); 遇到的问题 在没有数据的时候页面的高度是690px; 调用数据请求后，在ajax的success里面打印高度还是690px （我认为是数据加载完了，但是页面没有渲染好，所以高度获取的还是之前的高度）; 我就在vue这几个(created，mounted，updated)生命周期都打印了下，都还是690px; 解决问题 需要用到$......

自酌一杯酒 1万+

vue中准确获取动态渲染的dom元素的高度

首先监听这个动态元素的变化，在this.$nextTick中获取dom元素，但我获取的时候是不准确的，所以就加了个延时器，就能获取dom元素准确的高度啦 <template> <img ref="bottomBtn" :src="suspendBottomConfig.icon" alt=""> </template> <script> export default{ data(){ return{ suspendBotto...

weixin_54009353的博客 2620

vue请求数据完成后执行_Vue在页面数据渲染完成之后的调用方法

Vue在页面数据渲染完成之后的调用方法在使用Vue框架的时候，有时候需要在Vue在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表的高度的时候，由于数据没有加载完，获取不到准确的高度。之前在使用jquery的时候，有ready可以帮助我们实现，但是Vue不存在此类方法，我们需要结合watch和this.$nextTick()来实现。nextTick：在下次 DOM 更新循环结...

weixin_39872334的博客 5440

vue 获取dom子元素_vue获取dom元素注意事项

mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this.$refs.bodyFont.offsetHeight);}}vue想要获取dom元素的高，一般情况下我们都可以想到写在mounted函数里，即dom加载完再获取，但是结果并不如我们所想，又想到用一...

weixin_39929813的博客 2875

vue在渲染后再获取该元素的高度

今天开发时需要获取某个元素的高度，但因为用到vue，没渲染完之前获取的高度是不准确的，然后上网搜了下，找到了方法 1 watch: { //hotkeyList渲染完后，获取高度 2 hotkeyList:function() { 3 this.$nextTick(function(){ 4 ...

weixin_30314631的博客 2072

uni-app 如何获取DOM 节点

【参考官网：https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryexec】 一、如何获取SelectorQuery对象实例： let query=uni.createSelectorQuery(); 功能：返回一个SelectorQuery对象的实例，该实例用来查询DOM节点的信息。 注意事项： （1）该方法需要在生命周期mount...

peijiajing的博客 7万+
上一篇： NavigationDuplicated: Avoided redundant navigation to current location: “/login“ 路由重复导致拨错
下一篇： call 和 apply 的使用
点赞 1
评论 1
书签 书签 0
TO_WebNow
TO_WebNow
博客等级 码龄8年 23粉丝 160原创
+ 关注 专栏目录 订阅专栏
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值