获取ref获取的节点的高度 不用offsetHeight
时间: 2024-03-24 09:37:46 浏览: 8
你可以使用`getBoundingClientRect()`方法获取元素相对于视口的位置和大小,从而获取元素的高度。这个方法返回一个DOMRect对象,其中包含元素的位置和大小信息。你可以使用`height`属性来获取元素的高度,如下所示:
```
const element = document.getElementById('your-element-id');
const rect = element.getBoundingClientRect();
const height = rect.height;
```
请注意,`getBoundingClientRect()`方法返回的高度值是以像素为单位的,而不是EM或REM等相对单位。
相关问题
vue3获取ref offsetHeight
可以通过以下代码获取ref元素的offsetHeight:
```javascript
import { ref, onMounted } from 'vue'
export default {
setup() {
const myRef = ref(null)
let offsetHeight = 0
onMounted(() => {
offsetHeight = myRef.value.offsetHeight
console.log(offsetHeight)
})
return {
myRef
}
}
}
```
其中,myRef是一个ref对象,通过ref()函数创建。在onMounted钩子函数中,可以通过myRef.value获取到ref元素的DOM节点,从而获取offsetHeight属性。
vue获取子节点的宽高
你可以使用 `$refs` 来获取子节点的宽高。首先,在子组件中,给子节点设置一个 `ref` 属性,如下所示:
```html
<template>
<div ref="childNode">子节点</div>
</template>
```
然后,在父组件中,通过 `$refs` 来获取子节点的宽高,如下所示:
```javascript
mounted() {
const childNode = this.$refs.childNode
const width = childNode.offsetWidth
const height = childNode.offsetHeight
console.log('子节点的宽度:', width)
console.log('子节点的高度:', height)
}
```
这样就可以获取到子节点的宽高了。当然,如果在组件渲染完成后获取子节点的宽高,需要在 `mounted()` 生命周期中进行。