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


Posted in Javascript onJuly 29, 2020

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 的时候,想要获得一个指定的元素的高度时,可以使用 vue 中的 ref 。

当 ref 加在普通的元素上,使用 this.ref.name 获取到的是 dom 元素

示例

写在 页面 html 部分的

<div ref="init"></div>

写在 页面 方法 部分

这里的 offsetHeight 是返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)

let height= this.$refs.init.$el.offsetHeight;

这里的offsetHeight可以替换,用来获取其他的属性

offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)

offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)

clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)

clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)

style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)

style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)

scrollWidth //返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同

scrollHeigh //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同

除此之外,还可以获取带有单位的数值

let height = window.getComputedStyle(this.$refs.init).height;

这样获取的值是有单位的。

以上这篇解决vue项目获取dom元素宽高总是不准确问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery focus和blur事件的应用详解
Jan 26 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
js编写的treeview使用方法
Nov 11 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
详解Vue的sync修饰符
May 15 Vue.js
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 #Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 #Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 #Javascript
在vue中实现给每个页面顶部设置title
Jul 29 #Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 #Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 #Javascript
Element中Slider滑块的具体使用
Jul 29 #Javascript
You might like
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python内置函数的用法实例教程
2014/09/08 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Puppeteer使用示例详解
2019/06/20 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
个人担保书范文
2014/05/20 职场文书
挂职学习心得体会
2014/09/09 职场文书
甘南现象心得体会
2014/09/11 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
创先争优承诺书
2015/01/20 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
element多个表单校验的实现
2021/05/27 Javascript