使用JavaScript实现点击按钮实现隔行换色

最新推荐文章于 2023-11-19 11:09:06 发布
最新推荐文章于 2023-11-19 11:09:06 发布
阅读量716 收藏 1
点赞数 1
文章标签： javascript 前端 开发语言 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/song17631538490/article/details/128103933
版权

主要思路为：获取全部li标签、获取按钮标签、创建一个flag值为true。给按钮标签设置点击事件给按钮后续使用if语句进行判断因flag默认值为true所以if（flage）=if(true) 就会执行if语句下的代码

设置循环主要是为了将li标签全部循环一遍因为是隔行变色所以通过i%2==0获取到不相邻的两个数后续修改下标不相邻两个数的li标签设置新的class属性 从而实现点击后隔行换色的效果 。

添加flage是为了让按钮可以重复点击使用点击第一次 运行的是if（fage）里的代买再点击一次 运行的是else里的代码

JS代码如下：

HTML代码如下：

 

 

 

你也是铃角怪
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js写的点击变色
10-16
如何用原生js写点击变色 原生js的for循环和类的删除添加 点击事件的添加 事件监听
JS DOM练习
weixin_44154094的博客
01-15 311
练习：做一个可以点击按钮切换图片的网页 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #pic{ width: 500px; height: 400px; }
Vue和JavaScript实现：多个li中点击不同li，颜色实时动态改变
weixin_46870466的博客
04-12 1064
Vue、JavaScript、点击不同li颜色动态改变
JS实现隔行换色
m0_71966801的博客
07-07 656
在 JavaScript 部分，我们首先通过 getElementById 方法获取到表格元素。然后使用 querySelectorAll 方法选择所有带有 "row" 类名的 tr 元素，在循环中对每个行元素进行判断，如果行索引是奇数，则将其添加 "even" 类名，以改变其背景色。上述事例使用了一张表格来展示数据，并给每个数据行的 tr 元素添加了类名 "row"。通过 CSS 样式设置了奇数行的背景色为灰色。
js中tab栏切换，点击当前li变色，同时切换内容，默认选中第一个
爬楼梯的前端小白的博客
07-29 2637
js中的tab栏，导航栏制作，点击当前li，显示对应盒子里的内容
原生javascript实现隔行换色
10-24
主要介绍了原生javascript实现隔行换色,需要的朋友可以参考下
基于JavaScript实现表格隔行换色
10-15
主要介绍了基于JavaScript实现表格隔行换色,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
不用javascript实现带序号的表格隔行换色的效果
10-30
使用css实现隔行换色的方法，需要的朋友可以参考一下
使用JavaScript和CSS实现文本隔行换色的方法
10-23
主要介绍了使用JavaScript和CSS实现文本隔行换色的方法,当然最普通的也可以单纯用CSS实现,需要的朋友可以参考下
利用js实现代码的隔行换色
a000515的博客
08-26 238
实现表格的隔行换色
JavaScript制作表格隔行变色效果（新浪微博中的应用）
weixin_51415327的博客
09-02 420
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
表格隔行变色2020/11/21
weixin_50286102的博客
11-21 595
onmouseover:鼠标经过事件 onmouseout:鼠标离开事件 元素 定义了一个包含数据的表格单元格 代表行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht.
js实现隔行换色
最新发布
xiaohua0708day的博客
11-19 410
2.获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。6.设置背景颜色(.style.backgroundColor)第一步：确定事件(onload)并为其绑定一个函数。5.获取奇数行和偶数行(对遍历中角标对2取余)第五步：获取奇数行和偶数行(角标对2取余)1.确定事件(页面加载事件onload)第六步：分别对奇数行和偶数行设置背景颜色。第四步：对tbody里面的行进行遍历。4.JS的遍历(for循环)第二步：书写函数(获取表格)
js实现按钮点击变色，其他的按钮恢复默认颜色
热门推荐
异想实验室|Arduion|ESP8266|Micro Python|
08-19 1万+
JavaScript实现按钮点击变色，其他的按钮恢复默认颜色，则需通过循环实现，当有按钮点击的时候，先将所有的按钮的颜色，更改为空，然后在针对，鼠标点击的相应的按钮，进行更改按钮颜色；onclick实现按钮点击后的操作；...
Javascript知识【案例：表格隔行换色】
若有所执，必有所成，心之所向，必显光芒
08-07 2581
案例：表格隔行换色
通过使用简单的JavaScript的效果实现点击按钮区域变色，并记录变化次数
小杨的博客
07-02 4596
通过html，css，js代码实现点击按钮，标签区域变化，并且记录颜色变化的次数，通过js代码实现不断变化效果，用到了函数和点击事件以及其他的js知识
JS函数点击实现li标签的颜色更换
qq_41413469的博客
06-08 2741
这个需求的本质是js的使用。 html+css负责显示。css负责特效。js负责切换。 当鼠标点击按钮时，改变 li 的背景和颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
JavaScript 按钮排他思想
火星基地
10-24 474
要求： 有一系列按钮，要求每单击其中一个，该按钮改变样式（以背景颜色为例），其他按钮恢复保持默认样式。 实现思路： 获取所有按钮元素 首先先把其他按钮的背景颜色去掉 再单独设置自己的样式 代码实现： 仅展示<body></body>标签内的内容 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button
财经类的表格变色写法 几行代码搞定 简单易懂
SanRenKing的博客
11-27 187
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
使用javascript语言实现点击按钮后重新生成随机数
05-27
好的，我可以为你编写一个使用 JavaScript 实现点击按钮后重新生成随机数的代码。以下是一个简单的示例，你可以根据你的需求进行修改： HTML 代码： ```html ()">生成随机数 <p id="randomNumber"></p> ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值