Vue动态获取width的方法

1、html

<div ref="getheight"></div> <br><br>

2、JavaScript

// 获取高度值 （内容高+padding+边框）
let height= this.$refs.getheight.offsetHeight; 

// 获取元素样式值 （存在单位）
let height = window.getComputedStyle(this.$refs.getheight).height;
 
//获取元素内联样式值（非内联样式无法获取）
let width= this.$refs.getheight.offsetWidht;

3,javascript中获取dom元素高度和宽度

javascript中获取dom元素高度和宽度的方法如下：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的：

元素的实际高度：document.getElementById("div").offsetHeight
元素的实际宽度：document.getElementById("div").offsetWidth
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft
元素的实际距离上边界的距离：document.getElementById("div").offsetTop