您现在的位置是：网站首页> 编程资料编程资料

如何在Vue中获取DOM元素的实际宽高_vue.js_

2023-05-24 311人已围观

简介如何在Vue中获取DOM元素的实际宽高_vue.js_

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

Vue && DOM

在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。

为了保险起见，所有的 DOM 操作建议都放在 $nextTick() 方法中。

使用 offsetWidth 、 offsetHeight 方法，返回 Number 类型的值，如：52。

let $ele = this.$refs.wrap // 宽 let width = $ele.offsetWidth // 高 let height = $ele.offsetHeight

使用 window 全局对象中的 getComputedStyle API，返回 String 类型的值，包含px单位，如： '100px'。

let $ele = this.$refs.wrap // 宽 let width = window.getComputedStyle($ele).width // 高 let height = window.getComputedStyle($ele).height

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

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

原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕；

解决方法：利用Vue.nectTick(callback)

this.$nextTick(() => { this.$refs.editor[0].offsetHeight; })

Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调

到此这篇关于如何在Vue中获取DOM元素实际宽高的文章就介绍到这了,更多相关Vue获取DOM元素实际宽高内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：uni-app中renderjs使用的方式浅析_javascript技巧_