vue项目获取dom元素宽高总是不准确

最新推荐文章于 2024-08-20 11:39:25 发布

qq_34465778

最新推荐文章于 2024-08-20 11:39:25 发布

阅读量2.8k

点赞数 1

分类专栏： vue相关文章标签： vue.js

本文链接：https://blog.csdn.net/qq_34465778/article/details/103991480

版权

在Vue项目中，由于DOM元素内容动态变化，重置数据后立即获取宽高会不准确，因为元素尚未完成渲染。为解决此问题，可以使用Vue.nextTick(callback)确保在DOM更新后执行回调，从而获取正确的元素尺寸。

摘要由CSDN通过智能技术生成

dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确：

this.$refs.editor[0].offsetHeight;

原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕；
解决方法：利用Vue.nectTick(callback)

this.$nextTick(() => {
   
  this

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_34465778

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue3 获取元素高度不准的方法

xujing_06的博客

05-27

2650

<transition name="slide-width"> <a-col class="fixed-small" v-show="isShow" :style="{height: `${ztreeHeight}px`}"> <div class="left-small"> <a-tree checkable :tree-data="menuTreeD.

解决vue项目获取dom元素宽高总是不准确问题

11-20

dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0].offsetHeight; 原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕；解决方法：利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调补充知识：vue 获取指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度）使用 vue 的时候，想要

参与评论您还未登录，请先登录后发表或查看评论

【vue3】获取元素高度不准确处理方式

最新发布

Mianbao88l的博客

08-20

604

在第一个整体输出里的offsetHeight和第二个输出不一致，估计原因是vue3在初始化的时候渲染问题。2、在div上面加一个key=“index” 在onMounted里面增长强制div更新还是不行，ref=“myDiv”在onMounted获取高度时候出现高度不一致放在nextTick也不行。我先预设了table列表的高度，nextTick就能够生效获取到外面div的实际高度。用v-if通过销毁重新加载组件又会导致mydiv获取不到数据。比如我要通过最外面的div计算列表高度，可以先设置一个固定值。

vue在mounted中获取元素宽度不准确的问题

韩大璐

07-08

4952

遇到这样一个问题：在组件mounted生命周期中获取类名为newForm元素的宽度 mounted(){ this.formWidth = document.querySelector('.newForm').offsetWidth console.log('formWidth',this.formWidth) }, 审查元素发现，元素的宽度为1695 但是控制台打印输出的一直都是1890 查资料发现可能是页面没有完全渲染完毕就去获取了元素的宽度加个延迟

vue3中onMounted获取元素高度不准确

DN金猿的博客

07-26

481

设个定时器，在页面挂载完1秒后再获取高度，就获取到实际高度了，但是有一点，页面体验感不是很好，而且偶尔也会出现获取值不准确现象。如果你有更好的解决方案，可以在下方评论区留言。以上数据可以通过打印ref实例和ref.value.offersetHeight查看。页面元素和页面资源未完全渲染与加载完，就获取高度，导致获取不准确。

Vue获取dom宽高的方法，以及不准确的解决方案

qq_53679247的博客

02-17

3643

既然是单线程的，的在某个特定的时刻只有特定代码能被执够行，并阻塞其它的代码。因为当JavaScript线程的正在处理其他JavaScript代码时，其实以已经阻塞了另外的代码，其中包括的setTimeout的定时器部分的实现。其中this.$nextTick是页面渲染完成后的回调函数，当页面渲染完成再进行获取宽高等就比较准确了，但是还是有问题的，如果没用看方法2。这边是用一个setTimeout实现的，其作用是在其他操作执行完毕后才会执行其中的代码，如果有延时的话还会先延时。

offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题

zmx760102412的博客

04-15

6377

获取offsetWidth，和clientWidth的值时弹窗为0，在CSDN上询问了一下才明白了原因：在HTML的声明下，屏幕宽高是隐藏的，如果想要获得值，就需要在css中定义一下HTML和body的高度为100%。

解决vue项目获取dom元素宽高总是不准确问

05-11

综上所述，解决vue项目获取dom元素宽高总是不准确的问题，我们可以使用Vue提供的$nextTick方法/ ref属性/ watch等方法来获取最准确的宽高值，同时也可以在开发中尽可能避免异步操作，确保获取宽高的时机是尽可能准确...

Vue中获取dom元素的宽高

活宝小娜的博客

10-17

833

vue操作dom元素

在Vue中获取DOM元素的实际宽高

天问博客-专注于大前端技术

07-19

1万+

最近使用 D3.js 开发可视化图表，因为移动端做了 rem 适配，所以需要动态计算获取图表容器的宽高，其中涉及到一些原生DOM API的使用，避免遗忘这里总结一下。

Vue获取DOM元素样式和样式更改示例

08-31

本文将详细介绍如何在Vue中获取DOM元素的样式以及如何更改这些样式。首先，需要了解Vue中常见的获取和操作DOM的方式。在Vue组件中，通常不推荐直接使用原生JavaScript的document对象来操作DOM，因为这样做可能会...

vue 获取元素宽高

热门推荐

lgg1997的博客

07-05

1万+

vue 获取元素宽高

vue项目中用jquery获取DOM的高度outerHeight()首次进入和编译后有偏差的问题

勤勇的博客

09-28

1748

DOM的高度设置尽量设定固定高度，不要用padding和margin撑开，可以解决这个问题(里面参数添加true也没有用) tips:在outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top，border-bottom ；如果includeMargin参数是true，那么margin (top 和 bottom)也会被包含。 ...

vue获取不到页面元素高度

树上骑个猴的博客

12-18

1782

比如我我想获取el-form的高度 <el-form :model="addOrEditForm" class="el-form-dialog" label-width="120px" ref="elForm" > </el-form> 1.不要在created里面获取，因为界面dom还没挂载到页面上 2.el-form是elementui封装的元素，需要再获取的前提加一个$el，就可以获取到其高度 this.refs.elForm.$el.offsetHeight 如果是

vue获取不到元素正确的offsetHeight

qq_43999459的博客

11-14

8437

vue页面渲染完成后根据获取到的数据来决定操作某个DOM元素想实现的效果：如果获取到的文本数据所占用的高度小于87px,则不显示展开这个按钮，反之则展示 html <div> <p id="idu">简介: <span type="text" v-html="introduce"></span> </p> <div> <a v-if="ishow">{{message}}</a&g

vue无法获取dom元素高度的解决方案

Misnice的博客

06-30

3994

如何dom元素没有设置高度或高度是自适应的，是无法直接获取的高度的，解决方法如下，在获取高度时加个延迟器： outoHeightFn(){ setTimeout(() => { let dom = this.$refs.remark; const height = dom.offsetHeight; if(height < 300){ dom.style.height = '300px'; }

vue：使用：element 中弹框中获取table高度无效

1363648943的专栏

04-25

547

dialog 弹框中想要获取里面table的高度，获取不到，是因为dialog中有动画，需要监听动画加载完

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

m0_63477273的博客

06-03

3552

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