请问vue3如何获取元素的margin-top值？

Question

现在需要动态获取dom的margin-top的值做动画效果

Answer 1

首先你要保证开始获取时，目标元素已经渲染完毕。

然后就很简单了，以 composition API 为例：

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

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

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

Answer 2

https://www.runoob.com/jsref/jsref-getcomputedstyle.html
可以使用getComputedStyle获取元素所有属性，文档中有相关示例

具体什么场景需要获取dom属性，vue一般数据操纵视图，使用变量绑定margin-top值，动态更改变量值就行了