vue3 - 获取DOM元素并且修改元素样式示例源码，当点击一个元素（比如按钮、容器）需要用更改 style css 的样式（附带详细的功能示例及解决方案）

已于 2024-07-29 11:39:52 修改
阅读量5.3k 收藏 4
点赞数 5
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue3js vue3下修改元素样式 vue3 获取dom元素 vue3 获取dom元素并修改 vue3 详细示例教程
于 2023-04-12 12:23:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/130103903
版权

效果图

大部分都是 vue2的代码，本篇是新 vue3。

在 Vue3 项目的开发中，可能会遇到一些改变样式的操作，对样式的改变需要获取元素的 style。

比如：点击一个按钮后，让其宽度增加、或者颜色改变。

至于怎么触发，触发后做出什么变化，就看你自己的需求了，稍微改一下就行。

附带详细功能示例，完美实现。

解决方案

可根据你的需求，进行调整代码。

操作主要

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue3 - 使用 Lunchbox.js 创建一个 3D 地球（详细步骤及运行示例教程源码）
高级前端工程师
02-13 1794
用 Lunchbox 在 vue3 中创建一个旋转的 3D 地球竟是如此简单，在VUE中使用echarts制作3d地球，VUE3 创建可交互的3D世界，使用Lunchbox.js 在Vue 中构建3D 视觉效果，用Lunchbox 在 vue3，使用Lunchbox.js 在Vue 中构建3D 视觉效果，在VUE中使用echarts制作3d地球，js实现地球旋转动画，vue实现3d地球特效，用vue3+Three打造一个三维太阳系，vue-cli3 使用 cesium 创建 3d 地图，VUE使用百度地图A
Vue3 实现JS动态改变CSS样式
weixin_61273407的博客
08-24 1826
CSS中使用 var() 函数引用颜色变量(这里是用elementPlus为例, 也可以改)JS判断切换的tab, 来改变颜色变量的颜色。在html标签中绑定动态style。
Vue3动态改变css样式的方法，确实很简单很好用
05-25 4607
【代码】Vue3动态改变css样式的方法，确实很简单很好用。
2024年Vue项目：style样式篇，阿里技术专家面试经验
xcbyaya的博客
05-11 289
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式。
vue 获取元素在浏览器的位置_Vue获取页面元素的相对位置的方法示例
weixin_39977934的博客
12-19 2353
今天在开发源码一处发现有一处需要获取元素的相对位置高度，发现getBoundingClientRect有一个问题，它是用于获取某个元素相对于视窗的位置集合，达不到我想要的要求，如是看到阮老师写的一篇文章，关于用Javascript获取页面元素的位置，很好解决了我的我问题发现问题当我滚动到元素的位置时候，我想把元素固定在头部// html 结构首页推荐最新发布export default {data...
基于 vue-element-admin 升级的 Vue 3 + TypeScript + Element-Plus 版本后台管理系统正式开源
有来技术
05-01 4万+
项目基于vue-elemnent-admin升级的Vue3版本,代码结构基本和vue-element-admin一致，代码风格参考Vue.js社区，CSS遵守BEM规范 ，站在巨人的肩膀不仅是为了看的更远，更多的是一种致敬、延续和希望走的更远。
实战分享！基于 Vue3 + CSS3 + js-tool-big-box 打造超炫的字符串中间加星号效果
xingyu_qie的专栏
05-22 1566
在开发中，一些关键字符串，为了隐藏用户的真实信息，我们往往会将中间的一部分做加星号显示，然后星号前后都会保留一部分内容。为了能够更加愉悦的学习这个工具库里的功能呢，我们基于项目和做了一个非常炫酷的效果出来，希望大家读完后，学到了使用方法，还可以很开心的掌握一种炫彩文字效果。
Vue3 + Vite + TypeScript + Element-Plus：从零到一构建企业级后台管理系统（前后端开源）
热门推荐
有来技术
04-17 6万+
vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案，技术栈为 Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Router 等当前主流框架。本篇是 vue3-element-admin v2.x 版本从 0 到 1，相较于v1.x 版本增加了对原子CSS(UnoCSS)、按需自动导入、暗黑模式的支持。
vue3 滚动条滑动到元素位置时，元素加载
m0_58002043的博客
07-04 552
水个文效果要实现的思路就是，使用检测元素是否在视口中显示，然后在通过css来进行动画载入。
vue muit-ui infinite-scroll源码解析
ScheduledThreadPoolExecutor原理源码解析
05-22 1万+
infinite scroll基本使用vue的mint-ui的infinite scroll的基本使用地址：infinite-scroll接入指南. 简单解释一下： 1、指令接受的method：处理loadmore回调 2、自定义属性infinite-scroll-disabled：为false时:不会进行是否到达底部的判断,因此就触发不了loadmore回调 3、自定义属性infinite
vue操作dom元素的3种方法示例
10-14
一旦获取到元素，就可以使用JavaScript的各种DOM API进行修改，如`element.style.property`来改变样式，或`element.innerHTML`来改变元素内容。以下是一个简单的例子： ```javascript const domElement = ...
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
在Vue2和Element-UI框架下，开发一个具备el-aside侧边栏容器收缩与展开功能的应用是一项常见的任务。Element-UI是基于Vue2的组件库，提供了丰富的UI组件，其中包括el-aside，用于创建侧边栏布局。下面将详细阐述实现...
vue 画布 vue-fabric-drawing
02-20
Vue Fabric Drawing 是一个基于 Vue.js 和 Fabric.js 的画布组件，专为 Vue 开发者设计，用于在网页上实现交互式绘图功能。Vue.js 是一个流行的前端框架，它简化了构建用户界面的过程，而 Fabric.js 是一个强大的 ...
antv/x6封装vue2.0源码
05-13
《AntV X6 封装 Vue 2.0 源码详解：构建高效图形编辑器的奥秘》 在IT行业中，图形界面与交互设计的重要性不言而喻，尤其在业务流程、数据可视化和系统架构等领域。AntV X6 是阿里开源的一款强大的图形引擎，专为...
小兔鲜电商项目（Vite + Vue3）-vue3-rabbit.zip
11-04
"小兔鲜电商项目"是利用现代前端技术栈Vite和Vue3构建的一个示例项目，旨在展示如何高效地开发一个功能完善的电商应用。Vite是由Vue.js创始人尤雨溪开发的新型前端构建工具，它引入了模块热更新、按需编译等特性，极...
【SCI顶级】金豺算法GJO-CNN-LSTM-Multihead-Attention温度预测【含源码 5741期】.zip
最新发布
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
2023睿抗机器人开发者大赛.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
【JCR一区级】飞蛾扑火算法MFO-CNN-LSTM-Attention故障诊断分类预测【含源码 5668期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
vue3使用ref获取dom元素然后修改样式怎么弄
06-11
在Vue 3中，您可以使用`ref`来获取DOM元素，并通过`value`属性来访问DOM元素的属性和方法。下面是一个例子，演示如何使用`ref`获取DOM元素并修改样式： ``` <template> <div ref="myDiv">Hello, World!</div> </template> <script> import { ref } from 'vue' export default { setup() { const myDiv = ref(null) function changeColor() { myDiv.value.style.color = 'red' } return { myDiv, changeColor } } } </script> ``` 在这个例子中，我们定义了一个`div`元素，并使用`ref`指定了一个名称`myDiv`。在`setup`函数中，我们通过`const myDiv = ref(null)`来创建一个`ref`对象，并初始化为`null`。然后，我们定义了一个`changeColor`函数，它会在被调用时修改`myDiv`的文本颜色为红色。在函数中，我们使用`myDiv.value`来访问`myDiv`的实际DOM元素，并使用`style.color`属性来修改文本颜色。 在模板中，您可以使用`ref`指令来将DOM元素绑定到`myDiv`，并在需要时调用`changeColor`函数来修改样式。例如： ``` <template> <div ref="myDiv">Hello, World!</div> <button @click="changeColor">Change Color</button> </template> ``` 在这个例子中，我们在模板中使用`ref="myDiv"`将`div`元素绑定到`myDiv`变量。然后，我们在按钮上绑定了一个`@click`事件，当按钮被点击时，会调用`changeColor`函数来修改文本颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值