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