js 循环点击事件 改变背景颜色

最新推荐文章于 2023-04-14 10:35:45 发布
最新推荐文章于 2023-04-14 10:35:45 发布
阅读量3.2k 收藏 2
点赞数 2
分类专栏： js jquery 文章标签： js 循环点击事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nicholas_long/article/details/81948764
版权
js 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
jquery
8 篇文章 0 订阅
订阅专栏

老规矩先看效果:

这里使用的ul li标签这里就不上代码了很简单 下面就是重要部分：

使用的js获取id下li标签的长度当然你也可使用jquery 不做过多的讲解一目了然

叫我阿龙啊
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS+JS实现文本隔行变色的几种方法
web 前端 基础记录
11-07 1438
隔行变色的九种实现方案 CSS+JS实现文本背景三行变色方案一：用CSS实现隔行变色==利用伪类选择器来实现文本背景隔行变色==JS方案：采用JS实现隔行变色方案二：for循环 > 遍历的数除以3 取余数 （模3）行内样式改变样式。方案三：for循环 > 遍历的数除以3 取余数 （模3）在style上面设置样式，在下面通过className，赋值标签名。方案四：switch循环 > style里面设置类名样式。.className方案五：三元运算 > 表达式1？ 表达
js随机改变颜色
majic_Jing的博客
10-07 2034
目的：用js将页面设置成随着鼠标点击界面而随机改变颜色。 代码如下： <!DOCTYPE html> <html> <head> <title>随机改变页面颜色</title> <script type="text/javascript"> function changeBg() { //将背景颜...
点击改变字体颜色.rar
05-19
JavaScript 点击页面上的按钮，实现循环改变字体颜色Demo
图片和背景颜色一起变换的js切换
06-03
通栏适应浏览器切换，比较适用于企业网站，大气美观
js实现点击更换样式
weixin_46381442的博客
12-09 2200
js实现点击更换样式 需求： 一个列表点击那个列表给他更换背景颜色、边框 首先我们在循环的列表中动态添加一个class:class="{'rechargehover':recharge==index}" 然后在data中定义recharge：0； 然后在点击事件里添加this.recharge = index 记得在点击事件里吧index带进去 然后我们给rechargehover添加点击之后的样式就可以了 希望这个文章能帮助你 ...
jquery实现点击按钮循环变色功能的3种方式
just_learing的博客
02-28 2955
点按钮换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .changeRed{ background-color:red; } </style> </head> <body> <ul> <li &gt
js-实现点击循环变色问题
老衲的少女心i~
03-31 1508
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js-点击循环变色事件</title> <style> #box { width: 200px; height: 200px; background-color: pink; cu
使用js实现单击按钮，让他改变颜色
weixin_70079360的博客
04-14 3621
按钮1按钮2按钮3按钮4按钮5按钮
js实现按钮点击变色，其他的按钮恢复默认颜色
热门推荐
异想实验室|Arduion|ESP8266|Micro Python|
08-19 1万+
JavaScript实现按钮点击变色，其他的按钮恢复默认颜色，则需通过循环实现，当有按钮点击的时候，先将所有的按钮的颜色，更改为空，然后在针对，鼠标点击的相应的按钮，进行更改按钮颜色；onclick实现按钮点击后的操作；...
javascript 背景和字体颜色自动变色
男儿当自强
09-19 4106
背景颜色：document.bgColor设定； 前景颜色：document.fgColor设定； <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here var n=0; var arr=new Array("blue",
js表格三色循环
05-30
表格的三种颜色循环
Javascript-Practise-Easy-Examples:易于学习的Javascript，当您学习这些示例时便会喜欢它
04-13
简单易用的Javascript范例这是一些学习Javascript基础的网站 中文版中文版以下是一些示例，可帮助您学习Javascript 原料药全屏天气获取Pixivweb图片帆布基本的单击更改颜色和宽度功能绘制矩形图书馆D3js 树木日期...
JavaScript网页特效范例宝典源码
09-04
实例254 通过按钮变换背景颜色 395 实例255 背景自动变色 396 实例256 百叶窗 396 实例257 渐隐渐显的背景颜色 398 实例258 页面缩小 399 实例259 页面上下打开效果 400 实例260 页面左右打开效果 402 实例261 页面...
JS学习资料
12-17
在CSS彻底改变了Web页面布局的方式之后，万维网联盟跨浏览器的DOM标准的制定，使JavaScript终于突破瓶颈，成了大大改善网页用户体验的利器。 本书在简洁明快地讲述JavaScript和DOM的基本知识之后，过几个实例演示了...
jquery 动态点击li标签切换背景颜色
Nicholas_long的博客
05-23 8560
废话不多讲老规矩先上图 看效果：&lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; 改为你本地项目的js路径&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;  &lt;script type="text/javascript&am
js 递归修改json的key键
Nicholas_long的博客
08-09 5107
首先看一下我的json数结构： [{     "id": 1,     "text": "工作平台",     "m_code": "001",     "m_childrenId": 0,     "iconCls": "fa fa-television fa-2x",     "m_url": "ww.baidu.
js遍历json key 动态修改其属性值
Nicholas_long的博客
08-01 5096
首先定一个数组： var json = {"name":"你好","age":18,"arr":[13,5,6]}; 遍历json for(var  key in json){   if(key === "age"){ //修改josn中指定属性值               json[key]=400;         }    }  console.log(json)//打印修改之后的js...
改变 Easyui TreeGrid默认图标
Nicholas_long的博客
06-02 4312
废话不多说先上图看效果：带文件夹的菜单名称不用管，只要你返回的json数据里 属性名是 iconCls ：'icon图标名称'    json图标属性名必须是：iconCls Easyui默认，否则不显示；附上json格式：很简单到这里就结束了。...
登录绑定回车事件
Nicholas_long的博客
07-12 4161
绑定回车事件写法有很多种，那么以下是我常用的两种方式：先来说一下键盘事件：1、keydown()  keydown事件会在键盘按下时触发.  2、keyup()  keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件  3、keypress()  keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键第一次种：$(document).keypress(function...
js循环出来的td给其中一列的加点击事件
最新发布
10-01
使用JavaScript循环创建出的td，想要给其中一列的td加上点击事件，可以通过以下步骤实现: 1. 首先，给这一列的td设置一个特殊的类名，方便在后续的选择器中定位到这些td。例如，可以给这一列的td统一添加一个名为"clickable"的类名。 2. 使用JavaScript中的querySelectorAll()方法，通过选择器选取所有拥有该类名的td元素。例如，可以使用类选择器".clickable"来选取所有"clickable"类名的td元素。 3. 遍历选取到的td元素列表，使用addEventListener()方法为每个td元素添加点击事件监听器。 以下是示例代码： ```javascript // 首先给需要添加点击事件的那一列td设置特殊类名 for (var i = 0; i < tdList.length; i++) { tdList[i].className += " clickable"; } // 选取所有具有特殊类名的td元素 var clickableTdList = document.querySelectorAll(".clickable"); // 遍历选取到的td元素列表，添加点击事件监听器 for (var j = 0; j < clickableTdList.length; j++) { clickableTdList[j].addEventListener("click", function() { // 在这里编写点击事件的处理逻辑 // 可以使用this关键字来引用被点击的td元素 // 例如：this.style.backgroundColor = "red"; }); } ``` 在以上代码中，首先通过循环为需要添加点击事件的那一列td添加了"clickable"类名。然后使用querySelectorAll()方法选取所有具有"clickable"类名的td元素。接着使用addEventListener()方法为每个td元素添加了一个点击事件监听器。在监听器中可以编写所需的点击事件处理逻辑，可以使用this关键字来引用被点击的td元素。在示例代码中，注释部分展示了如何通过改变被点击的td元素的背景颜色来演示点击事件的处理逻辑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值