位置: IT常识 - 正文
在Vue中获取DOM元素的实际宽高(在vue中获取dom元素)
编辑：rootadmin在Vue中获取DOM元素的实际宽高 
本文链接地址:https://www.jiuchutong.com/zhishi/297422.html
转载请保留说明！
推荐整理分享在Vue中获取DOM元素的实际宽高(在vue中获取dom元素)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue获取dom元素的属性,vue中怎么获取dom,vue获取元素的方法,vue3.0 获取dom,vue获取元素的方法,在vue中获取dom元素,在vue中获取dom元素,在vue中获取dom元素,内容如对您有帮助，希望把文章链接给更多的朋友！
最近使用 D3.js 开发可视化图表，因为移动端做了 rem 适配，所以需要动态计算获取图表容器的宽高，其中涉及到一些原生DOM API的使用，避免遗忘这里总结一下。
一、获取元素在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。 为了保险起见，所有的 DOM 操作建议都放在 $nextTick() 方法中。
<template> <div class="box" ref="wrap"></div></template><script>export default { mounted() { // 获取 DOM 元素 this.$nextTick(()=>{ let $ele = this.$refs.wrap }) },}</script><style scoped> .box { width: 100%; height: 200px; background-color: pink; }</style>二、获取元素宽高使用 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欢迎访问：天问博客