【JavaScript】点击那个按钮，那个按钮变色，其他方案

最新推荐文章于 2024-09-07 16:03:24 发布
最新推荐文章于 2024-09-07 16:03:24 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangkang7/article/details/86250175
版权

author：咔咔

wechat：fangkangfk

方案：

1.先将第一次显示的给给默认样式，也就是添加checked的class

2.如果点击了之后传递一个参数给后台，后台assign到前端，使用参数判断，根据参数就可以判断谁需要加checked

注意：这只适合数据固定的情况下，如果数据不固定还是使用JavaScript来做

咔咔-
关注
专栏目录
通过使用简单的JavaScript的效果实现点击按钮区域变色，并记录变化次数
小杨的博客
07-02 4848
通过html，css，js代码实现点击按钮，标签区域变化，并且记录颜色变化的次数，通过js代码实现不断变化效果，用到了函数和点击事件以及其他的js知识
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
09-28
在绘制四渐变色播放按钮的过程中，首先定义了绘制按钮函数drawPlayButton，并为它传入了两个参数，分别是Canvas绘图上下文对象和按钮的位置坐标。在函数内部首先设置了一个变量nRadius来定义按钮的半径大小。 接着...
JavaScript单击按钮，改变按钮颜色效果
yi_ZhangMengXin的博客
04-14 2625
按钮1按钮2按钮3按钮4按钮5
JavaScript：点击变颜色
weixin_44848852的博客
01-27 703
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <ul name="boxs" id="box"> <li>000</li> <li>111</li> <li>222</li> <li>333</li> <li&gt
两个按钮点击的颜色切换问题
qq_63981644的博客
09-07 180
③最重要的是，给①中的activeBtn选择器一点样式。以下基于element-plus组件库。②定义一个变量，控制按钮的效果是否显示。
使用js实现单击按钮，让他改变颜色
weixin_70079360的博客
04-14 4101
按钮1按钮2按钮3按钮4按钮5按钮
javascript改变按钮颜色
weixin_41277470的博客
08-05 295
用JavaScript改变按钮颜色的详细教程 一、流程概述 首先我们需要清楚的是，改变按钮颜色的整个过程可以分为几个简单的步骤。以下是一个表格，展示了实现这个功能的整体步骤： 步骤 描述 1 创建HTML按钮 2 使用CSS定义按钮的样式 3 编写JavaScript代码来监听按钮的点击事件 4 ...
js点击改变颜色
Lyonahah的博客
11-09 1391
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .cd{ width: 200px; height: 20px; border: solid 1px black; text-align: center; float: left;.
Javascript点击按钮随机改变数字与其颜色
10-21
从给定文件内容中提取出的知识点非常明确，主要围绕如何利用JavaScript实现点击按钮随机改变数字和其字体颜色的功能。下面是基于所提供内容的知识点详细说明： 1. HTML结构和样式设置：首先，需要了解基本的HTML...
AngularJS实现按钮提示与点击变色效果
10-21
实现按钮点击提示和变色效果，不仅需要掌握AngularJS的基本语法和操作，还需要理解CSS和JavaScript的综合运用。通过本篇文章的学习，读者应该可以掌握如何使用AngularJS实现具有交互性的Web界面组件，提升自己的前端...
简单的JS控制button颜色随点击更改
weixin_34112900的博客
01-19 1250
先上效果图： 默认“今日”是选中状态，是行内样式： &lt;button type="button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;"&gt;今日&lt;/button&gt; 上面的日期都是点击才会切换颜色： 点击其它颜色，“今日”颜色更换
JS实现按钮颜色切换效果
10-19
主要为大家详细介绍了JS实现按钮颜色切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS特效之变色的按钮
穿越清华
04-03 560
JS特效之变色的按钮 脚本说明: 把如下代码加入区域中 function msover(){{event.srcElement.style.color="000099";event.srcElement.style.backgroundColor="99ccff";event.srcElement.style.cursor = "hand";}} function msout(){{e
js实现按钮点击变色，其他的按钮恢复默认颜色
热门推荐
异想实验室|Arduion|ESP8266|Micro Python|
08-19 1万+
JavaScript实现按钮点击变色，其他的按钮恢复默认颜色，则需通过循环实现，当有按钮点击的时候，先将所有的按钮的颜色，更改为空，然后在针对，鼠标点击的相应的按钮，进行更改按钮颜色；onclick实现按钮点击后的操作；...
JavaScript多个按钮实现切换不同的颜色
YIC020920的博客
11-29 2673
以上的版本需要思考的地方：如果需要触发更多的事件，一个个的调用还是非常麻烦的，需要我们可以试试用动态实现，将颜色存放在数组里。可以在评论上展示一下你们的见解，怎样实现更多按钮点击之后可以切换更多的颜色！div样式的中的id需要调整一下，你们结合Script代码修改一下吧。展示一下它的div情况，css样式你们可以自行设计哈！仅供参考，依然有需要优化的地方，发挥你的想象去思考吧！，非常麻烦，但是实现起来相对比较容易。的知识点，整体还是比较好理解的。仅供参考，仍然有需要优化的地方。版本实现了、、优化，运用到。
【JavaScript】轻松更改网页背景与字体的颜色
编程记录，亲测有效
10-22 1万+
JavaScript，通过点击按钮更改网页背景与字体的颜色，网页中有N个改变颜色的按钮，点击不同的按钮，网页的字体与背景就会改变成不同的颜色。很简单的JavaScript小程序。
HBuilder X切换主标题颜色
weixin_45966674的博客
12-26 1199
在HBuilder X上打开一个项目 然后点击上方工具-主题 然后就可以选择一个自己喜欢的主题颜色啦
js点击按钮改变颜色
Lyonahah的博客
11-09 5668
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #bk{ width: 60%; height: 400px; border: solid 1px black; margin: 0 auto; margin-top: 10p...
JavaScript——点击事件按钮使div变色
CTSTD0812的博客
08-30 1969
JavaScript——点击事件按钮使div变色
html表格点击按钮变色
最新发布
10-14
HTML表格中的按钮变色通常通过JavaScript或者CSS来实现。下面是一个简单的例子： 1. 使用HTML创建一个按钮和一个表格： ```html <button id="myButton">点击我</button> <table id="myTable"> <!-- 表格内容 --> </table> ``` 2. 用CSS设置初始样式和鼠标悬停时的样式： ```css #myButton { background-color: initial; /* 初始颜色 */ cursor: pointer; } #myButton:hover { background-color: lightblue; /* 鼠标悬停时的颜色 */ } ``` 这会让按钮在默认状态下保持原色，当鼠标悬停在其上时变为浅蓝色。 3. JavaScript事件监听和处理： 如果你希望按钮只有在特定条件下才会改变颜色，比如点击后，可以添加JavaScript事件处理器： ```javascript document.getElementById("myButton").addEventListener("click", function() { this.style.backgroundColor = "red"; /* 点击后变成红色 */ }); ``` 当按钮被点击时，其背景颜色会变为红色，然后恢复到原始颜色需要在事件处理程序中添加相应的撤销逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

咔咔-

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

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

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

打赏作者

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

抵扣说明：

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

余额充值