vue获取dom元素与修改样式详解

关注

原创最新推荐文章于 2026-03-26 03:38:27 发布 7.2k 阅读 AI 写同款· GEO 优化 ›

vue3 - 获取DOM元素并且修改元素样式示例源码，当点击一个元素（比如按钮、容器）需要用更改 style css 的样式（附带详细的功能示例及解决方案） vue3获取元素并修改元素样式，vue3.0点击修改元素的css样式，vue3怎么修改元素css属性，vue3动态的改变样式，vue3中动态style(动态修改伪元素样式)，Vue3获取DOM元素样式和样式更改示例，vue3通过ref获取dom元素并修改样式，Vue3中如何获取dom元素并修改样式，Vue3 动态修改dom样式，vue3获取dom元素节点并操作元素的样式，vue3.0 获取dom设置样式，Vue3获取DOM元素并修改属性的方法，vue3 怎么动态改变element内部dom元素的样式，vue 阅读详情

vue中如何获取dom元素呢？

步骤详解

在标签上加上ref属性如：
在js中通过 this.$refs.加ref的值便可以获取dom 如：this.$refs.refDemo
修改对应的样式名如：this.$refs.refDemo.style.backgroundColor="#108ee9"
下面是代码例子

<template>
 
  <div class="demo" ref="refDemo">
  	这是一个测试demo
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
	  return{}
  },
  mounted() {
    //查看可以修改的所有css属性
  	console.log(this.$refs.refDemo.style)
  	 //按业务要求修改属性名
  	this.$refs.refDemo.style.backgroundColor="#108ee9"
  	this.$refs.refDemo.style.height="80px"
  	this.$refs.refDemo.style.lineHeight="80px"
  	this.$refs.refDemo.style.color="#fff"
  	
 //还不会？请加群 897149839
	
  },
  methods:{
	  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>