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

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

news 2025/9/15 2:52:07

需求：

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

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

.....

思路：

  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

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/9/9 14:51:30

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/8/22 5:05:32

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/8/10 22:32:47

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/9/12 23:22:04

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/8/15 1:44:58

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/6/16 17:16:14

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/9/13 7:34:44

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2025/9/9 16:52:54

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2025/9/9 10:09:30

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/9/2 16:53:17