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

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

news 2026/3/28 3:58:44

需求：

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

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

.....

思路：

  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

ollama-QwQ-32B模型微调+OpenClaw：个性化自动化助手训练实录

ollama-QwQ-32B模型微调OpenClaw&#xff1a;个性化自动化助手训练实录 1. 为什么需要个性化AI助手&#xff1f; 去年处理法律文书时&#xff0c;我发现通用大模型对专业术语的理解总差那么点意思。一个简单的"请整理这份合同中的关键条款"指令&#xff0c;模型返回…...

编程新知 2026/3/28 3:41:37

避开这些坑！群晖+acme.sh申请Let’s Encrypt证书的完整指南

群晖NAS上零踩坑申请Lets Encrypt证书的终极实践手册 每次看到浏览器地址栏那个刺眼的"不安全"提示就浑身难受&#xff1f;作为群晖深度用户&#xff0c;我花了三个周末时间踩遍了所有证书申请的坑。从idn指令缺失到nss验证失败&#xff0c;从API调用超时到证书自动更…...

编程新知 2026/3/28 2:43:06

OpenClaw多设备同步：GLM-4.7-Flash配置共享方案

OpenClaw多设备同步&#xff1a;GLM-4.7-Flash配置共享方案 1. 为什么需要多设备同步配置&#xff1f; 去年冬天&#xff0c;我在办公室和家里两台MacBook上分别部署了OpenClaw对接GLM-4.7-Flash模型。很快发现一个头疼的问题&#xff1a;每次在办公室调试好的技能参数&#…...

编程新知 2026/3/28 2:37:02

推荐一款微服务商城系统：技术栈新、全开源、好二开、运维还省心

一个开源商城&#xff0c;最怕的是什么&#xff1f;不是功能少&#xff0c;功能少可以慢慢加。不是文档烂&#xff0c;文档烂可以慢慢啃。最怕的是&#xff1a;你把系统拿到手&#xff0c;折腾了半天终于跑起来&#xff0c;结果发现核心代码是加密的&#xff0c;想改个支付逻辑…...

编程新知 2026/3/28 2:04:19

阿联酋人工智能大学：AI能在战争迷雾中做出理性判断吗？

这项由阿联酋穆罕默德本扎耶德人工智能大学和美国马里兰大学共同完成的研究发表于2026年3月&#xff0c;论文编号为arXiv:2603.16642v1。有兴趣深入了解的读者可以通过该编号查询完整论文。在人类历史上&#xff0c;预测战争走向一直是个极其困难的任务。就像我们很难在暴风雨中…...

编程新知 2026/3/28 1:35:46

PCap04电容测量实战：从传感器连接到串口通信的完整指南

PCap04电容测量实战&#xff1a;从传感器连接到串口通信的完整指南 当工程师面对高精度电容测量需求时&#xff0c;PCap04芯片往往成为解决复杂问题的关键。这款集成了数字信号处理能力的电容数字转换器(CDC)&#xff0c;能够将皮法级电容变化转化为精确的数字信号。不同于传统…...

编程新知 2026/3/27 21:05:44

小白程序员必看：收藏这份上下文工程指南，轻松玩转大模型！

本文深入浅出地介绍了上下文工程在大语言模型中的重要性&#xff0c;阐述了指令、示例、知识、记忆、工具和安全护栏等六种上下文类型。文章详细解析了上下文工程的四个基本阶段&#xff1a;撰写上下文、选择上下文、压缩上下文和隔离上下文&#xff0c;并强调了上下文窗口的作…...

编程新知 2026/3/27 20:23:31

【SOC】Fastboot /DFU 烧录镜像

uboot下 使用fastboot 进行 UFS/EMMC/nand 设备烧录的大致流程&#xff1a; board 进入 uboot&#xff08;支持 fastboot&#xff09;&#xff1b; 同时host机器安装上 fastboot 客户端 ; 2者&#xff08;board与host&#xff09;之间通过usb线连接,通过fastboot 协议进行交互…...

编程新知 2026/3/27 20:23:25

STP安全特性实战：如何用bpduguard和bpdufilter防止网络攻击（附真实案例）

STP安全特性实战&#xff1a;如何用bpduguard和bpdufilter防止网络攻击&#xff08;附真实案例&#xff09; 在企业网络架构中&#xff0c;生成树协议&#xff08;STP&#xff09;的安全防护常常被忽视&#xff0c;直到某天凌晨2点&#xff0c;值班工程师突然接到全网瘫痪的告警…...

编程新知 2026/3/27 20:15:08

水下机器人导航的‘感官进化’：从纯视觉VIO到声光惯压融合的SVIn2系统拆解

水下机器人导航的‘感官进化’&#xff1a;从纯视觉VIO到声光惯压融合的SVIn2系统拆解 当一台水下机器人潜入浑浊的湖泊执行管道巡检任务时&#xff0c;它的视觉传感器突然失效——悬浮颗粒使画面变成乳白色噪点&#xff0c;而水流扰动让惯性测量单元(IMU)数据充满噪声。这正是…...

编程新知 2026/3/27 18:48:38