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

在 vue 3 中获取元素的 margin-top 值

想要实现动画效果，需要动态获取 dom 元素的 margin-top 值。操作步骤如下：

确保 dom 元素已经渲染完毕

首先，需要确保目标元素已经在 mount 时渲染完毕。可以在 mounted() 钩子函数中进行操作。

利用 composition api 获取值

以下示例展示了如何使用 composition api 获取 margin-top 值：

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

// 这里不用传值，变量名要等于 ref
const targetDom = ref<HTMLElement>()

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