【我不熟悉的javascript】display:none/v-show=“false“的元素，使用getBoundingClientRect获取的各项值都为0

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

先看代码，使用getBoundingClientRect，获取一个display:none的元素的边界

<template>
	<div id="hello" class="box">hello word</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
	mounted() {
		const ele = document.getElementById('hello')
		const rect = ele?.getBoundingClientRect()
		console.table(rect)
	},
})
</script>
<style>
.box {
	display: none;
}
</style>

此时打印出来的各项结果是0，去掉display:none就没有问题了。

同理我们在vue中使用了v-show的情况下，如果值为false，也会出现这种情况，以后需要注意喽！！ 

如果使用 opacity和visibility来隐藏元素，则不会有这种情况