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

最新推荐文章于 2023-04-14 10:35:45 发布
原创 最新推荐文章于 2023-04-14 10:35:45 发布 · 3.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #循环点击事件

本文介绍如何使用JavaScript获取指定ID下的所有LI标签的数量。通过简单的代码示例，展示了不依赖于jQuery等库直接操作DOM的方法。

老规矩先看效果:

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

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

jquery实现点击按钮循环变色功能的3种方式
just_learing的博客
02-28 3258
点按钮换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .changeRed{ background-color:red; } </style> </head> <body> <ul> <li &gt
CSS+JS实现文本隔行变色的几种方法
web 前端 基础记录
11-07 1925
隔行变色的九种实现方案 CSS+JS实现文本背景三行变色方案一：用CSS实现隔行变色==利用伪类选择器来实现文本背景隔行变色==JS方案：采用JS实现隔行变色方案二：for循环 > 遍历的数除以3 取余数 （模3）行内样式改变样式。方案三：for循环 > 遍历的数除以3 取余数 （模3）在style上面设置样式，在下面通过className，赋值标签名。方案四：switch循环 > style里面设置类名样式。.className方案五：三元运算 > 表达式1？ 表达
js-实现点击循环变色问题
老衲的少女心i~
03-31 1738
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js-点击循环变色事件</title> <style> #box { width: 200px; height: 200px; background-color: pink; cu
js点击的时候变颜色怎么做？
kakaxiD的博客
04-06 3674
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .current{background:#efd060;} </style> <ul class="toolbar"> <li class="click"> &nb
循环列表中点击更改当前项的字体颜色
weixin_45301448的博客
01-08 993
方法一 <!-- index.wxml --> <view class='top'> <view class="{{ currentTab == index ? 'active' : '' }}" wx:for="{{top}}" wx:key="{{lalala}}" bindtap="{{ currentTab != index ? 'navbarTap':'...
前端应用_js_利用for循环批量更改背景色
上海 彭彭
08-03 1657
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相加</title> <style type="text/css"> .box{ width:300px; ...
原生JS总结1------操作遍历的dom元素时需要注意的事
web开发
11-02 694
最近研究了下原生js，发现其中的地雷很多。以前的时候每次写js只用借助于jquery这种js框架来写，所以每次写完之后都觉得很方便，而且很快，不用考虑过多的兼容性处理问题。但是最近觉得还是得研究下原生js，就用原生js写了两个小游戏，收获颇多。（下面会将两个游戏的代码放上去：贪吃蛇和扫雷） 原生js在获取dom元素时，除了document.getElementById()外，其他的...
vue实现点击按钮切换背景颜色的示例代码
10-15
在Vue.js中，我们可以轻松地实现点击按钮切换背景颜色的功能。这个功能主要依赖于Vue的数据绑定和事件处理机制。以下是对给定代码的详细解释： 1. **数据绑定**：在Vue中，我们使用`v-bind`指令来绑定HTML元素的...
js实现点击按钮随机生成背景颜色
10-14
在JavaScript中，我们可以利用事件监听和数学方法来实现点击按钮后随机生成背景颜色的功能。以下是对给定的标题、描述和代码内容的详细解释： ### 随机颜色生成原理 随机生成背景颜色的核心在于创建一个十六进制...
js实现点击按钮后给Div图层设置随机背景颜色的方法
10-24
用户通过点击按钮，div元素的背景颜色就会在每次点击后更新为一个新的随机颜色。 知识点七：生成随机颜色的原理 生成随机颜色涉及到两个关键点：十六进制颜色代码和随机数。十六进制颜色代码由一个井号开始，后面...
js点击列表文字对应该行显示背景颜色的实现代码
12-10
本文将详细介绍如何使用JavaScript实现这个功能，特别是在网页列表中点击文字后改变对应行的背景颜色。 首先，我们需要在CSS中定义两个样式类。第一个是通用的列表项样式`li`，我们可以为其设置鼠标指针样式`cursor...
js点击更换背景颜色或图片的实例代码
10-27
文档内容涉及了直接在HTML标签中使用onclick事件属性更改背景颜色的方法，以及使用JavaScript函数和事件处理来实现背景色或背景图的动态更换。 知识点包括： 1. HTML中内联JavaScript的使用方法： - 直接在HTML...
vue中v-for循环选中点击的元素并对该元素添加样式操作
11-20
相信大家都会遇到这种情况：v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化 html： {{item.name}} css： .addclass{ color : red; } js： data:{ items :[
js 基础学习 遍历DOM
qq_40890601的博客
07-23 1073
DOM这块知识很重要，做个总结吧！ DOM 表示文档对象模型，每个HTML标签都是一个对象，标签内的文本也是对象，所有这些对象都可以使用 js 来访问和修改。 js 共有12 种节点类型 通常用到的有四种： document — DOM 的“入口点”。 元素节点 — HTML 标签，树构建块。 文本节点 — 包含文本。 注释 — 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它。 自动修正 如果浏览器遇到格式不正确的HTML，它会在形成DOM的时候修正它。 例如，顶级标签永
原生js循环展示dom_复习Js:
weixin_39978749的博客
10-16 599
(谢谢观赏)为什么学习 JavaScript（作用）：1、html+css 只是可以实现静态的页面无法实现动态的效 果 2、表单的校验 3、背景图片的更换 4、操作节点的信息JavaScript 的概念：JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、 基于原型的语言，内置支持类型JavaScript 组成：ECMAScript：JavaScript的核心 文档对象模型（DOM）...
js随机改变颜色
majic_Jing的博客
10-07 2224
目的：用js将页面设置成随着鼠标点击界面而随机改变颜色。 代码如下： <!DOCTYPE html> <html> <head> <title>随机改变页面颜色</title> <script type="text/javascript"> function changeBg() { //将背景颜...
javascript 背景和字体颜色自动变色
男儿当自强
09-19 4396
背景颜色：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循环写hover变色效果
qq_49277509的博客
07-11 931
前前前前端静静第六篇博客 最近开始重新复习js了，最近写了一个很小的demo，本来就css的hover属性就可以轻松搞定，奈何，高估了自己的能力，非用js去写hover事件，结果，出bug了，求助求助，在我的求助下，别人帮助我解决了这个问题，下面详细看看吧~~~~ 首先是我自己的小demo： 首先这个逻辑是：添加一个类名，鼠标移动上的时候就添加这个类名，鼠标不在这个元素上就移除类名，根据这个原理去进行变色的样子 css .active { background-color: rgb
使用js实现单击按钮，让他改变颜色
weixin_70079360的博客
04-14 4435
按钮1按钮2按钮3按钮4按钮5按钮
点击改变循环的背景颜色
最新发布
02-20
### 实现点击事件更改HTML元素背景颜色 #### JavaScript实现方式 当用户希望利用纯JavaScript来实现点击事件并改变指定HTML元素的背景颜色时，可以采用如下方法： 创建一个简单的函数监听特定元素上的`click`事件，在触发此事件之后执行相应的逻辑操作——即修改目标对象的样式属性`backgroundColor`。下面是一个具体的实例说明[^1]。 ```javascript document.getElementById('targetElement').addEventListener('click', function() { this.style.backgroundColor = 'red'; // 更改被点击元素的颜色为红色 }); ``` 对于更复杂的需求场景下，比如想要针对列表项(`<li>`)或者其他类型的标签节点应用相同的交互行为，则可以通过遍历这些子级项目并将上述处理机制附加到每一个个体之上完成批量配置工作。 #### jQuery实现方式 如果倾向于使用jQuery库简化DOM操作流程的话，那么能够更加便捷地达成同样的目的。只需要引入jQuery脚本文件后按照以下模式书写代码即可达到预期效果[^3]。 ```javascript $(function(){ $("ul li").click(function(){ // 给所有的<li>绑定点击事件处理器 $(this).css("background-color", "blue"); // 设置当前选中的<li>背景变为蓝色 }); }); ``` 以上两种途径均能有效地响应用户的动作反馈，并即时更新页面上相应组件外观特性；具体选用哪一种取决于个人偏好以及项目的实际需求状况。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值