如何通过$refs访问元素样式？已获取元素但样式访问报undefined

1. 操作时机过早，DOM未完成挂载 #

如果代码在组件created钩子或初始渲染前执行，此时DOM还未生成——哪怕console.log看似输出了元素，实际执行样式赋值时目标元素还未挂载，导致.style返回undefined。

解决方式：

• 将代码移至mounted钩子中执行，确保DOM完全挂载；
• 若在数据更新后执行，用$nextTick包裹代码等待DOM更新：

  this.$nextTick(() => {
    const targetBlock = this.$refs['block' + row + column];
    targetBlock.style.backgroundColor = this.colors[toColor];
  });
  

2. ref绑定的是多根节点Vue组件（Vue3场景） #

如果block${row}${column}对应的是Vue组件，且该组件包含多个根节点（无唯一根容器），Vue3会移除组件实例的$el属性，此时访问.el会得到undefined；而组件实例本身也没有.style属性。

解决方式：

• 给组件添加唯一根容器（比如用<div>包裹所有内部元素）；
• 在组件内部给目标元素单独绑定ref，通过组件暴露的方法修改样式（更符合组件化规范）；
• 若需父组件直接操作，可通过this.$refs['block' + row + column].$refs.内部元素ref访问目标DOM。

3. refs命名冲突或元素被动态移除 #

如果row与column的组合存在重复，会导致多个元素共用同一ref名称，此时this.$refs['block' + row + column]是数组而非单个元素，直接访问.style必然报错。另外，若元素被v-if移除（不是v-show隐藏），refs会失效。

解决方式：

• 检查row和column的组合是否唯一，确保每个元素的ref名称不重复；
• 确认操作时目标元素处于DOM挂载状态（未被v-if移除）。

内容的提问来源于stack exchange，提问作者wuhu