当前位置： 首页 > news >正文

js实现元素样式切换的基本功能

news 文章来源：https://blog.csdn.net/dyk11111/article/details/129097205 2024/11/6 11:46:16

需求：

用户第一次点击某些元素，改变元素的某些样式，比如背景颜色，字体颜色。

用户第二次点击某些元素，恢复之前的样式。

.....

思路：

  1. 准备一定量的div盒子，并取相同的类名

<div class="box" ></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

  1. 通过js获取所有元素，并给定指令。使得点击任意一个盒子，都可随意改变原有样式，而不影响其他盒子

  1. 判断，如果当前点击的盒子背景被改变，则再点击当前盒子背景恢复。

效果：

代码实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.box {
width: 50px;
height: 50px;
background-color: aqua;
margin: 5px;
}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
let box = document.querySelectorAll(".box");
for (let i = 0; i < box.length; i++) {
box[i].onclick = function() {
if (box[i].style.background == '' || box[i].style.background == undefined) {
box[i].style.background = 'red'
} else {
if (box[i].style.background == 'red') {
box[i].style.background = 'aqua'
} else if (box[i].style.background == 'aqua') {
box[i].style.background = 'red'
}
}
}
}
</script>

</body>
</html>

相关文章：

js实现元素样式切换的基本功能

需求&#xff1a;用户第一次点击某些元素&#xff0c;改变元素的某些样式&#xff0c;比如背景颜色&#xff0c;字体颜色。用户第二次点击某些元素&#xff0c;恢复之前的样式。.....思路&#xff1a;准备一定量的div盒子&#xff0c;并取相同的类名<div class"box&quo…...

编程日记 2023/2/18 13:27:19

java 策略模式 + 工厂模式 实例

一 前言 经常听说各种设计模式&#xff0c;知道理论&#xff0c;也知道应该使用&#xff0c;但具体怎么用&#xff0c;什么时候用&#xff0c;使用的优点一直比较模糊&#xff0c;今天写一个项目中经常用到的模式&#xff0c;来具体理解。项目中经常用到工厂模式或者策略模式&…...

编程日记 2023/2/18 13:26:14

本地生成动漫风格 AI 绘画 图像｜Stable Diffusion WebUI 的安装和部署教程

Stable Diffusion WebUI 的安装和部署教程1. 简介2. Windows安装环境3. 运行4. 模型下载链接5. 其他资源1. 简介 先放一张WebUI的图片生成效果图&#xff0c;以给大家学习的动力 &#xff1a;&#xff09; 怎么样&#xff0c;有没有小小的心动&#xff1f;这里再补充一下&…...

编程日记 2023/2/18 13:25:11

华为OD机试 - 异常的打卡记录 | 备考思路，刷题要点，答疑 【新解法】

最近更新的博客 【新解法】华为OD机试 - 关联子串 | 备考思路，刷题要点，答疑，od Base 提供【新解法】华为OD机试 - 停车场最大距离 | 备考思路，刷题要点，答疑，od Base 提供【新解法】华为OD机试 - 任务调度 | 备考思路，刷题要点，答疑，od Base 提供【新解法】华为OD机试…...

编程日记 2023/2/18 13:23:03

「机器学习笔记」之深度学习基础概念（基于Pytorch）

本文以 Pytorch 为线索&#xff0c;介绍人工智能和深度学习相关的一些术语、概念。 关于发展历史您也可以阅读深度学习神经网络之父 Jrgen Schmidhuber 所写的《Annotated History of Modern AI and Deep Learning&#xff08;现代人工智能和深度学习的注释版历史&#xff09;…...

编程日记 2023/2/18 13:21:57

概率和似然

在日常生活中&#xff0c;我们经常使用这些术语。但是在统计学和机器学习上下文中使用时&#xff0c;有一个本质的区别。本文将用理论和例子来解释概率和似然之间的关键区别。 概率与似然 假设在一场棒球比赛中&#xff0c;两队的队长都被召集到场上掷硬币。获胜的队长将根据掷…...

编程日记 2023/2/18 13:20:52

前期软件项目评估偏差，如何有效处理？

1、重新评估制定延期计划 需要对项目进行重新评估&#xff0c;将新的评估方案提交项目干系人会议&#xff0c;开会协商一致后按照新的讨论结果制定计划&#xff0c;并实施执行。 软件项目评估偏差 怎么办&#xff1a;重新评估制定延期计划2、申请加资源 如果项目客户要求严格&a…...

编程日记 2023/2/18 13:19:47

Xline v0.2.0: 一个用于元数据管理的分布式KV存储

Xline是什么&#xff1f;我们为什么要做Xline&#xff1f; Xline是一个基于Curp协议的&#xff0c;用于管理元数据的分布式KV存储。现有的分布式KV存储大多采用Raft共识协议&#xff0c;需要两次RTT才能完成一次请求。当部署在单个数据中心时&#xff0c;节点之间的延迟较低&a…...

编程日记 2023/2/18 13:18:43

CompletableFuture

一、一个示例回顾Future 一些业务场景我们需要使用多线程异步执行任务，加快任务执行速度。JDK5新增了Future接口，用于描述一个异步计算的结果。虽然Future以及相关使用方法提供了异步执行任务的能力，但是对于结果的获取却是很不方便，我们必须使用Future.get()的方式阻塞调…...

编程日记 2023/2/18 13:17:37

面试不到10分钟就被赶出来了，问的实在是太变态了...

干了两年外包&#xff0c;本来想出来正儿八经找个互联网公司上班&#xff0c;没想到算法死在另一家厂子。 自从加入这家外包公司&#xff0c;每天都在加班&#xff0c;钱倒是给的不少&#xff0c;所以也就忍了。没想到11月一纸通知&#xff0c;所有人不许加班&#xff0c;薪资…...

编程日记 2023/2/18 13:16:32

【C++】类与对象 （四）初始化列表 static成员 友元 内部类 匿名对象 拷贝对象时的一些编译器优化

前言 本章就是我们C中类与对象的终章了&#xff0c;不过本章的难度不大&#xff0c;都是类中一些边边角角的知识&#xff0c;记忆理解就行了&#xff0c;相信经过这么长时间的学习类与对象&#xff0c;你对面向对象也有了更加深的理解&#xff0c;最后我们学习完边边角角的一些…...

编程日记 2023/2/18 13:15:28

04：进阶篇 - 编译 CTK

作者： 一去、二三里 个人微信号： iwaleon 微信公众号： 高效程序员 在使用 CTK 之前，首先要进行编译。但要成功编译它，并不是一件很容易的事，这不仅取决于平台、Qt 的版本，也取决于编译器，以及所使用的 IDE。 平台（Linux、Windows）Qt 版本（4.x、5.x、6.x）编译器（MS…...

编程日记 2023/2/18 13:14:24

SQL73 返回所有价格在 3美元到 6美元之间的产品的名称和价格

描述有表Productsprod_idprod_nameprod_pricea0011egg3a0019sockets4b0019coffee15【问题】编写 SQL 语句&#xff0c;返回所有价格在 3美元到 6美元之间的产品的名称&#xff08;prod_name&#xff09;和价格&#xff08;prod_price&#xff09;&#xff0c;使用 AND操作符&am…...

编程日记 2023/2/18 13:13:20

【Linux 多线程互斥】如何保证锁的原子性（互斥的原理）

临界资源:可以被多个执行流&#xff08;线程或者叫轻量级进程&#xff09;同是访问的&#xff08;多个执行流共享的&#xff0c;比如&#xff1a;全局、堆等等&#xff09;&#xff1b;临界区&#xff1a;访问这些临界资源的代码&#xff1b;原子性&#xff1a;没有中间态&…...

编程日记 2023/2/18 13:12:14

Android 实现沉浸式全屏

前言 本文总结 Android 实现沉浸式全屏的实现方式。 实现沉浸式全屏 在一些需要全屏显示的场景下，比如玩游戏、看横屏视频的时候，内容全屏，占满窗口的体验会让用户更加沉浸到对内容的消费中，带来好的用户体验。 沉浸式显示具体来说就是如状态栏和导航栏部分的显示效果调…...

编程日记 2023/2/18 13:11:09

数据分析与SAS学习笔记6

数据集整理&#xff1a; 目的&#xff1a;对数据集中的数据进行预处理&#xff0c;使数据更适合统计分析过程对数据格式的要求&#xff1b; 常见整理要求&#xff1a; 1&#xff09;建立新的变量&#xff0c;衍生变量&#xff0c;删除某些原变量&#xff1b; 2&#xff09;…...

编程日记 2023/2/18 13:10:02

自动化完成1000个用户的登录并获取token并生成tokens.txt文件

自动化完成1000个用户的登录并获取token并生成tokens.txt文件 写作背景 在我学习使用redis实现秒杀功能的过程中&#xff0c;在编写完秒杀代码后&#xff0c;需要使用Jmeter实际测试1000个用户进行秒杀&#xff0c;由于秒杀功能需要在用户登录完成后才能实现&#xff0c;用户是…...

编程日记 2023/2/18 13:08:57

2023年全国最新安全员精选真题及答案1

百分百题库提供安全员考试试题、建筑安全员考试预测题、建筑安全员ABC考试真题、安全员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 11.&#xff08;单选题&#xff09;在起重作业中&#xff0c;&#xff08;&#xff09…...

编程日记 2023/2/18 13:07:51

NoMachine 输入用户名密码后 闪断 解决办法

大家好&#xff0c;我是虎哥&#xff0c;最近工作忙&#xff0c;好长时间没有继续套件的深度学习&#xff0c;今天周六&#xff0c;难得有空&#xff0c;泡好茶&#xff0c;打开电脑&#xff0c;链接套件桌面&#xff0c;得&#xff0c;出问题了&#xff0c;一个很奇怪的问题&a…...

编程日记 2023/2/18 13:06:46

WebADI - 参数的使用

* 本文仅供交流分享&#xff0c;不作为专业指导 最近研究了一下WEBADI文档下载的参数&#xff0c;由于网上这块资料较少&#xff0c;所以专意分享下我的笔记。 准备 集成器&#xff1a;BHSC_EMP_ADI 表值集&#xff1a;BHSC_DEPT_LOV&#xff08;值&#xff1a;dname&#x…...

编程日记 2023/2/18 13:05:40

【OJ】两个圆

&#x1f4da;Description: 直角坐标系内现有两个半径相等的圆&#xff0c;问两圆的位置关系。 位置关系有&#xff1a;重合&#xff0c;相切&#xff0c;相离&#xff0c;相交&#xff1b; 若两圆相交&#xff0c;需要求出两圆的重叠面积。 ⏳Input: 输入包含多组数据&a…...

编程日记 2023/2/18 13:04:31

一文读懂澳洲医疗：白菜价的药物怎么领？

众所周知&#xff0c;福利优厚的澳洲&#xff0c;在医疗系统上有着令全世界人民都羡慕的超高福利。 几十万的天价药&#xff0c;在澳洲&#xff0c;白菜价就能轻松到手。 国内70万元一针的“诺西那生钠注射液”&#xff08;目前中国国内唯一治疗脊髓性肌萎缩症的进口精准靶向药…...

编程日记 2023/2/18 13:03:25

scrum看板视图切换时间线视图做项目管理

企业需要开发一个项目&#xff0c;可以制作时间线进行管理&#xff0c;以便参与者和管理者了解项目的时间进度。项目进行到哪一步&#xff0c;参与者有哪些&#xff0c;责任人是谁&#xff0c;这些都可以通过时间线进行展示。「时间线视图」是一种比甘特图更轻量、更实用的工具…...

编程日记 2023/2/18 13:02:17

10、MySQL查询优化

MySQL查询优化 1.MySQL查询优化技术2.子查询优化2.1 优化器自动优化2.2 优化措施：子查询合并2.2 优化措施：子查询上拉技术3.外连接消除4.生产环境不使用join联表查询5.group by分组优化5.1 group by执行流程5.2 为什么group by要创建临时表6.order by排序优化7.MySQL性能抖动…...

编程日记 2023/2/18 13:01:10

C++模板（一）

文章目录C模板&#xff08;一&#xff09;1. 泛型编程2. 函数模板2.1 函数模板格式2.2 模板原理2.3 模板实例化2.4 模板参数匹配原则3. 类模板3.1 类模板格式3.2 背景3.3 类模板的实例化C模板&#xff08;一&#xff09; 1. 泛型编程 前面我们学到了函数重载这个特性&#xf…...

编程日记 2023/2/18 13:00:06

【TypeScript】TypeScript的基础类型（string，number，boolean，void，null，undefined）：

文章目录一、安装【1】安装npm install typescript -g【2】基础类型&#xff1a;Boolean、Number、String、null、undefined 以及 ES6 的 Symbol 和 ES10 的 BigInt二、字符串类型(string)三、数字类型(number)四、布尔类型(boolean)五、空值类型(void)六、null和undefined类型…...

编程日记 2023/2/18 12:58:58

【C语言】 详谈指针

☃️内容专栏&#xff1a;【C语言】初阶部分 ☃️本文概括&#xff1a;继初识C语言&#xff0c;对C语言指针初阶部分进行归纳与总结。 ☃️本文作者&#xff1a;花香碟自来_ ☃️发布时间&#xff1a;2023.2.17 目录 一、指针和指针类型 1.1 指针 1.2 指针类型 其一&#x…...

编程日记 2023/2/18 12:57:54

内网渗透(三十八)之横向移动篇-pass the key 密钥传递攻击(PTK)横向攻击

系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…...

编程日记 2023/2/18 12:56:50

教你快速学会画动漫人物表情

动漫人物表情画法&#xff0c;3分钟教你快速学会画表情&#xff0c;快来跟我一起零成本学板绘吧&#xff01;咱们的免费板绘系列教程又来啦&#xff0c;今天教大家的板绘技能是什么呢&#xff1f;今天的板绘学习教程来教你如何画动漫女生的表情&#xff01; 板绘动漫女生的表情…...

编程日记 2023/2/18 12:55:46

Qt系列：调用Edge浏览器示例

背景 需要解决以下几个问题 政府项目新浏览器兼容老系统ActiveX控件&#xff0c;Qt WebEngineView没有直接的实现方案&#xff0c;需要利用Qt的ActiveX兼容模块与浏览器往返多次交互Qt ActiveX未实现COM事件通知官方Win32示例存在滥用lambda函数的嫌疑&#xff0c;lambda函数…...

编程日记 2023/2/18 12:54:41

公众号编辑器哪个好用/seo优化需要多少钱

c#的Application.DoEvents()的作用 交出CPU控制权&#xff0c;让系统可以处理队列中的所有Windows消息&#xff0c;比如在大运算量循环内&#xff0c;加Application.DoEvents可以防止界面停止响应&#xff0c;因为winform的消息循环是一个线程来处理&#xff0c;那么假如你的某…...

编程日记 2024/11/6 11:41:03

app制作和网站一样吗/搜索关键词查询

本文出自伯特的《LoulanPlan》&#xff0c;转载务必注明作者及出处。对于 Java 开发者而言&#xff0c;泛型是必须掌握的知识点。泛型本身并不复杂&#xff0c;但由于涉及的概念、用法较多&#xff0c;所以打算通过系列文章去讲解&#xff0c;旨在全面、通俗的介绍泛型及其使用…...

编程日记 2024/11/6 8:42:31

做网站应该注意哪些问题/优化大师平台

小玉买文具 题目描述 班主任给小玉一个任务&#xff0c;到文具店里买尽量多的签字笔。已知一只签字笔的价格是1元9角&#xff0c;而班主任给小玉的钱是a元b角&#xff0c;小玉想知道&#xff0c;她最多能买多少只签字笔呢。 输入格式 输入的数据&#xff0c;在一行内&#xf…...

编程日记 2024/11/6 6:05:40

东莞正规网站建设/安卓优化大师app下载安装

【安装】Python 安装过程记录 下载地址 https://www.python.org/downloads/windows/ https://download.csdn.net/download/G971005287W/12678468 选适合自己的版本 embeddable zip file 是压缩包版本&#xff0c;即便携版&#xff0c;解压可用 executable installer 是可…...

编程日记 2024/11/6 4:01:37

八年级做网站/国内真正的免费建站

EasyClick 自定义侧边栏 鉴于官方自带的侧边栏菜单功能少样式丑，现在自己做一个，先移除官方自带的侧边栏，然后加载自定义的菜单布局。 官方自带侧边栏 自定义后的侧边栏图例...

编程日记 2024/11/6 3:04:14

全国少工委进入公众号/阜阳seo

题目链接&#xff1a;https://leetcode.com/problems/remove-duplicates-from-sorted-array/ 解题思路&#xff1a; 要求对一个排序数组的数字去重&#xff0c;而且不能申请额外的数组&#xff0c;返回不重复的数字。 这个思路比较简单&#xff0c;首先循环从第二个元素开始&am…...

编程日记 2024/11/6 2:51:06