首页vue3使用ref获取dom元素style

vue3使用ref获取dom元素style

时间: 2025-06-06 20:42:36 浏览: 22

### Vue 3 中使用 `ref` 获取 DOM 元素并操作其样式在 Vue 3 中，可以利用 Composition API 提供的 `ref` 函数来创建响应式的引用对象，并通过这些引用访问真实的 DOM 节点及其属性。当目标是在挂载阶段之后修改特定元素的内联样式时，可以在生命周期钩子函数如 `onMounted()` 内部执行相应逻辑。下面是一个具体的例子展示如何设置和改变某个 div 的背景颜色： ```html <template> <div ref="styledDiv">这个方框的颜色会变化</div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const styledDiv = ref(null); onMounted(() => { // 修改DOM元素的style属性 styledDiv.value.style.backgroundColor = "lightblue"; console.log(styledDiv.value.style); }); return { styledDiv, }; }, }; </script> <style scoped> /* 初始样式 */ div { width: 200px; height: 200px; } </style> ``` 此代码片段展示了如何定义一个名为 `styledDiv` 的引用变量指向模板中的 `<div>` 元素，在组件完成渲染后 (`onMounted`) 更改该元素的背景色为浅蓝色[^1]。对于更复杂的场景下可能需要等待下一个 DOM 更新周期再读取或更新样式的情况，则可借助于 `nextTick` 方法实现延迟处理: ```javascript import { ref, nextTick } from 'vue'; // ... const changeStyleLater = async () => { await nextTick(); styledDiv.value.style.borderRadius = "50%"; }; changeStyleLater(); ``` 上述方法确保了样式的更改发生在所有的状态变更被应用到 DOM 后立即发生[^2]。

阅读全文