MENU
- 前言
- html
- JavaScript
- 其他属性
- 获取带单位的属性
- getComputedStyle
前言
使用vue的时候,想要获得一个指定的元素的高度时,可以使用vue中的ref。
当ref加在普通的元素上,使用this.ref.name获取到的是dom元素。
html
单个ref
<div ref="refSingle">单个ref</div>
多个ref
<div ref="refMany" v-for="list" :key="item.id">{{item.title}}</div>
JavaScript
单个ref
that.$nextTick(() => {
let height= this.$refs.refSingle.offsetHeight;
console.log('height: ', height);
});
多个ref
单个ref
that.$nextTick(() => {
let elList = that.$refs.refMany;
elList.forEach((item, i) => {
// 另一个元素的宽度
that.$refs.refTitle[i].style.width = `width: calc(100% - ${item.offsetWidth}px);`
});
});
其他属性
属性 | 描述 |
---|---|
offsetWidth | 返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距) |
offsetHeight | 返回元素的高度(包括元素高度、内边距和边框,不包括外边距) |
clientWidth | 返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距) |
clientHeight | 返回元素的高度(包括元素高度、内边距,不包括边框和外边距) |
style.width | 返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距) |
style.height | 返回元素的高度(包括元素高度,不包括内边距、边框和外边距) |
scrollWidth | 返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距,无溢出的情况,与clientWidth相同) |
scrollHeigh | 返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距,无溢出的情况,与clientHeight相同) |
获取带单位的属性
let height = window.getComputedStyle(this.$refs.init).height;
console.log('height: ', height);
getComputedStyle
MDN
Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。