如何在 Vue3 中获取元素的 margin-top 值？

获取 vue3 中元素的 margin-top 值

在 vue3 中动态获取 dom 元素的 margin-top 值对于创建动画效果很有用。要做到这一点：

首先，确保在获取值时，目标元素已完全渲染。

接下来，根据你使用的 api，使用以下方法：

立即学习“前端免费学习笔记（深入）”；

composition api：

1. 为目标元素添加一个 ref：

   <div ref="targetdom"></div>

   登录后复制

2. 在 setup 函数中，创建一个 ref 对象：

   const targetdom = ref<htmlelement>();

   登录后复制

3. 定义一个函数来获取 margin-top 值：

   function getMarginTop(): string {   const styles = getComputedStyle(targetDom.value);   return styles.getPropertyValue('marginTop'); }

   登录后复制

你现在可以使用 getmargintop() 函数来获取 margin-top 值。