使用 vue 的时候,想要获得一个指定的元素的高度时,可以使用 vue 中的 ref 。
当 ref 加在普通的元素上,使用 this.ref.name 获取到的是 dom 元素
示例
写在 页面 html 部分的
<div ref="init"></div>
写在 页面 方法 部分
这里的 offsetHeight 是返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)
let height= this.$refs.init.offsetHeight;
这里的offsetHeight可以替换,用来获取其他的属性
offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)
offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)
clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)
clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)
style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)
style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)
scrollWidth //返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同
scrollHeigh //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同
除此之外,还可以获取带有单位的数值
let height = window.getComputedStyle(this.$refs.init).height;
这样获取的值是有单位的。
smile_hahahaxixi 同学提示下,已经修改。