在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

欢迎访问：天问博客

在Vue中获取DOM元素的实际宽高相关推荐

Vue中获取dom元素的宽高
vue中获取dom元素的宽高 template模板中给dom绑定ref: <el-carouselid="ailabelmap"ref="remarkCarusel ...
在vue中获取dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template><div><div id=& ...
vue.js -- 获取dom元素的样式(非行内样式)
在vue中获取dom元素的样式: this.$refs.menuList.style.top; 这种获取方式是只能获取到元素的行内样式的. this.$refs.menuList.getBoundin ...
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
js中获取dom元素高度
目录 1.dom元素的宽高 2.鼠标事件中的常用高度宽度: 3. 总结: 4.参考博客: 1.dom元素的宽高 javascript中获取dom元素高度和宽度的方法如下: 网页可视区域宽: docum ...
vue 获取id元素_.vue组件中获取DOM元素问题
一.问题引入原项目把一块内容直接写在了模块中(浏览器显示的一整个页面),现在想把它提成一个单独组件,而且把其中使用document.getElementById('id')改为ref获取元素的形式. ...
在vue3setup语法糖中获取DOM元素
1.给dom元素添加ref <a-form v-if="modalTitle==='新建指标'" :model="addForm" :rules=&quo ...
vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了但有一个问题我很纳闷就是你说下vue中获取dom元素的方法吧我说大体上俩中吧 1.vue中 ref的方法给元素起一个ref名称通过 th ...
Vue.js实例学习：获取DOM元素
一.获取DOM元素在Vue中获取DOM元素,我们可以用ref. 用法(和React一样): (1)在组件的DOM部分,任意标签中写上:ref="xxx" (2)通过组件对象 t ...

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

一、获取元素

二、获取元素宽高

在Vue中获取DOM元素的实际宽高相关推荐

最新文章

热门文章