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

获取 vue3 元素的 margin-top 值

在 vue3 中动态获取元素的 margin-top 值可以实现多种动画效果。以下是如何实现：

首先，确保在获取 margin-top 值之前，目标元素已经成功渲染完毕。然后，使用 composition api 即可轻松实现。

代码示例：

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

// ref 变量名与 HTML 元素的 ref 属性值相同
const targetDom = ref<HTMLElement>();

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

通过 getcomputedstyle() 方法，可以获取元素的所有 css 属性，包括 margin-top。