在 Vue 中获取 DOM 元素的高度可以通过以下几种方式:
1.使用 getElementById() 函数来获取元素的高度。在模板中,可以为元素添加 id 属性:
<div id="myDiv">Hello, world!</div>
let height = document.getElementById('myDiv').offsetHeight;
2.使用 $refs 来获取元素的高度。在模板中,可以为元素添加 ref 属性:
<div ref="myDiv">Hello, world!</div>
let height = this.$refs.myDiv.offsetHeight;
在这里,offsetHeight 属性可以获取元素的高度(包括元素的边框、内边距和内容区域)。
3.使用 getBoundingClientRect() 函数来获取元素的高度。在模板中,可以为元素添加 ref 属性或者 id 属性:
<div ref="myDiv">Hello, world!</div>
let el = this.$refs.myDiv
let height = el.getBoundingClientRect().height;
<!-- 或者原生DOM -->
<div id="myDiv">Hello, world!</div>
let el =document.getElementById('myDiv');
let height = el.getBoundingClientRect().height;
在这里,getBoundingClientRect() 函数返回元素大小位置属性集合