vue3获取元素并修改元素样式

🔥🔥🔥欢迎关注csdn前端领域博主: 前端小王hs

🔥🔥🔥email: 337674757@qq.com

🔥🔥🔥前端交流群： 598778642

需求：获取元素的样式并且修改元素样式

主要应用场景：点击元素后样式变化

在项目开发中，经常会遇到一些改变样式的操作，不同于一般点击进行数字的变化，对样式的改变需要获取元素的style，笔者浏览了目前论坛上的些许文章，大部分都是基于vue2的操作，本篇博客叙述在vue3的条件下进行获取元素并修改样式，主要涉及的API有ref和nextTick

操作主要分为如下几个部分，文章最后附完整的代码框架
①在要操作的元素上绑定ref

<div ref='div' style='width:'50px'>
1

②在script部分导入ref和nextTick

import { ref,nextTick} from 'vue'
1

③在script部分使得要操作的元素响应式即绑定ref

const div = ref()
1

④利用async await和nextTick

//需要在元素绑定函数a 这里忽略
async function a () {
  
  await nextTick()
  
  div.value.style.width="100px"
1
2
3
4
5
6

难点是在于为什么要使用async await和nextTick

如果不这样使用的话，会报错：parameter 1 is not of type ‘Element’
这个报错的原因大意是操作者在操作还没渲染的元素，或者说是想要操作的样式还没有对应的元素出现

那我们学习了vue3之后，懂得在nextTick后Dom已经更新，所以通过结合async await和nextTick可以使得元素在渲染过后进行有效的修改
下图来自vue3官方文档

完整操作示例代码：

<template>
	<div ref='div' style='width:'50px'>
</template>

<script setup>
import { ref,nextTick} from 'vue'

const div = ref()
async function a () {
  
  await nextTick()
  
  div.value.style.width="100px"
 }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如有问题可私信博主或联系337674757@qq.com