如何获取 Vue 中的 DOM 高度？三招教你搞定！

获取 Vue 中 DOM 高度的三种方法

在 Vue 中，获取 DOM 元素的高度是一个常见任务。本文将介绍三种获取 DOM 高度的常用方法，并讨论每种方法的优点和缺点。

1. 使用 getBoundingClientRect() 函数

getBoundingClientRect() 函数是最直接获取 DOM 高度的方法。它返回一个包含元素位置信息的对象，其中包括元素的高度。

const element = document.getElementById('my-element');
const height = element.getBoundingClientRect().height;

优点：

• 准确性高
• 易于使用

缺点：

• 可能会受到元素样式的影响，例如，如果元素具有边框或内边距，则获取的高度可能不包括这些值。
• 不会考虑滚动条的位置

2. 使用 $refs

在 Vue 模板中，我们可以使用 ref 属性为元素添加一个引用。然后，可以在 JavaScript 中使用 this.$refs 对象来访问该元素。

<template>
  <div ref="my-element"></div>
</template>

<script>
export default {
  mounted() {
    const height = this.$refs.myElement.offsetHeight;
  }
}
</script>

优点：

• 易于使用
• 不会受到元素样式的影响
• 会考虑滚动条的位置

缺点：

• 只有在元素被挂载后才能使用
• 不支持在函数组件中使用

3. 使用 id

我们还可以使用 id 属性为元素添加一个 ID。然后，可以在 JavaScript 中使用 document.getElementById() 函数来获取该元素。

const element = document.getElementById('my-element');
const height = element.offsetHeight;

优点：

• 易于使用
• 不会受到元素样式的影响
• 会考虑滚动条的位置

缺点：

• 需要在 HTML 模板中添加 id 属性
• 不支持在函数组件中使用

哪种方法更适合您？

这取决于您的具体需求。如果您需要获取元素的高度，包括边框和内边距，那么使用 getBoundingClientRect() 函数是一个不错的选择。如果您需要获取元素的高度，但不包括边框和内边距，那么使用 $refs 或 id 属性是一个更好的选择。

温馨提示：

• 在使用 getBoundingClientRect() 函数时，请务必考虑到元素的样式，以确保获取的高度是您想要的。
• 在使用 $refs 或 id 属性时，请务必确保元素已被挂载，否则您可能会得到一个 null 值。

常见问题解答

1. 如何在 Vue 中获取元素的总高度，包括边框和内边距？

使用 getBoundingClientRect() 函数。

2. 如何在 Vue 中获取滚动条的位置？

使用 document.documentElement.scrollTop 或 document.body.scrollTop。

3. 如何在 Vue 中获取元素的宽度？

使用 getBoundingClientRect() 函数或 offsetWidth 属性。

4. 如何在 Vue 中获取元素的偏移位置？

使用 getBoundingClientRect() 函数的 top 和 left 属性。

5. 如何在 Vue 中设置元素的高度？

使用 style 属性，例如：element.style.height = '100px';。