js实现元素样式切换的基本功能
需求：
用户第一次点击某些元素，改变元素的某些样式，比如背景颜色，字体颜色。
用户第二次点击某些元素，恢复之前的样式。
.....
思路：
准备一定量的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>
通过js获取所有元素，并给定指令。使得点击任意一个盒子，都可随意改变原有样式，而不影响其他盒子
判断，如果当前点击的盒子背景被改变，则再点击当前盒子背景恢复。
效果：
代码实现：
<!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实现元素样式切换的基本功能
需求：用户第一次点击某些元素，改变元素的某些样式，比如背景颜色，字体颜色。用户第二次点击某些元素，恢复之前的样式。.....思路：准备一定量的div盒子，并取相同的类名<div class"box&quo…...
java 策略模式 + 工厂模式 实例
一 前言 经常听说各种设计模式，知道理论，也知道应该使用，但具体怎么用，什么时候用，使用的优点一直比较模糊，今天写一个项目中经常用到的模式，来具体理解。项目中经常用到工厂模式或者策略模式&…...
本地生成动漫风格 AI 绘画 图像｜Stable Diffusion WebUI 的安装和部署教程
Stable Diffusion WebUI 的安装和部署教程1. 简介2. Windows安装环境3. 运行4. 模型下载链接5. 其他资源1. 简介 先放一张WebUI的图片生成效果图，以给大家学习的动力 ：） 怎么样，有没有小小的心动？这里再补充一下&…...
华为OD机试 - 异常的打卡记录 | 备考思路，刷题要点，答疑 【新解法】
最近更新的博客 【新解法】华为OD机试 - 关联子串 | 备考思路，刷题要点，答疑，od Base 提供【新解法】华为OD机试 - 停车场最大距离 | 备考思路，刷题要点，答疑，od Base 提供【新解法】华为OD机试 - 任务调度 | 备考思路，刷题要点，答疑，od Base 提供【新解法】华为OD机试…...
「机器学习笔记」之深度学习基础概念（基于Pytorch）
本文以 Pytorch 为线索，介绍人工智能和深度学习相关的一些术语、概念。 关于发展历史您也可以阅读深度学习神经网络之父 Jrgen Schmidhuber 所写的《Annotated History of Modern AI and Deep Learning（现代人工智能和深度学习的注释版历史）…...
概率和似然
在日常生活中，我们经常使用这些术语。但是在统计学和机器学习上下文中使用时，有一个本质的区别。本文将用理论和例子来解释概率和似然之间的关键区别。 概率与似然 假设在一场棒球比赛中，两队的队长都被召集到场上掷硬币。获胜的队长将根据掷…...
前期软件项目评估偏差，如何有效处理？
1、重新评估制定延期计划 需要对项目进行重新评估，将新的评估方案提交项目干系人会议，开会协商一致后按照新的讨论结果制定计划，并实施执行。 软件项目评估偏差 怎么办：重新评估制定延期计划2、申请加资源 如果项目客户要求严格&a…...
Xline v0.2.0: 一个用于元数据管理的分布式KV存储
Xline是什么？我们为什么要做Xline？ Xline是一个基于Curp协议的，用于管理元数据的分布式KV存储。现有的分布式KV存储大多采用Raft共识协议，需要两次RTT才能完成一次请求。当部署在单个数据中心时，节点之间的延迟较低&a…...
CompletableFuture
一、一个示例回顾Future 一些业务场景我们需要使用多线程异步执行任务，加快任务执行速度。JDK5新增了Future接口，用于描述一个异步计算的结果。虽然Future以及相关使用方法提供了异步执行任务的能力，但是对于结果的获取却是很不方便，我们必须使用Future.get()的方式阻塞调…...
面试不到10分钟就被赶出来了，问的实在是太变态了...
干了两年外包，本来想出来正儿八经找个互联网公司上班，没想到算法死在另一家厂子。 自从加入这家外包公司，每天都在加班，钱倒是给的不少，所以也就忍了。没想到11月一纸通知，所有人不许加班，薪资…...
【C++】类与对象 （四）初始化列表 static成员 友元 内部类 匿名对象 拷贝对象时的一些编译器优化
前言 本章就是我们C中类与对象的终章了，不过本章的难度不大，都是类中一些边边角角的知识，记忆理解就行了，相信经过这么长时间的学习类与对象，你对面向对象也有了更加深的理解，最后我们学习完边边角角的一些…...
04：进阶篇 - 编译 CTK
作者： 一去、二三里 个人微信号： iwaleon 微信公众号： 高效程序员 在使用 CTK 之前，首先要进行编译。但要成功编译它，并不是一件很容易的事，这不仅取决于平台、Qt 的版本，也取决于编译器，以及所使用的 IDE。 平台（Linux、Windows）Qt 版本（4.x、5.x、6.x）编译器（MS…...
SQL73 返回所有价格在 3美元到 6美元之间的产品的名称和价格
描述有表Productsprod_idprod_nameprod_pricea0011egg3a0019sockets4b0019coffee15【问题】编写 SQL 语句，返回所有价格在 3美元到 6美元之间的产品的名称（prod_name）和价格（prod_price），使用 AND操作符&am…...
【Linux 多线程互斥】如何保证锁的原子性（互斥的原理）
临界资源:可以被多个执行流（线程或者叫轻量级进程）同是访问的（多个执行流共享的，比如：全局、堆等等）；临界区：访问这些临界资源的代码；原子性：没有中间态&…...
Android 实现沉浸式全屏
前言 本文总结 Android 实现沉浸式全屏的实现方式。 实现沉浸式全屏 在一些需要全屏显示的场景下，比如玩游戏、看横屏视频的时候，内容全屏，占满窗口的体验会让用户更加沉浸到对内容的消费中，带来好的用户体验。 沉浸式显示具体来说就是如状态栏和导航栏部分的显示效果调…...
数据分析与SAS学习笔记6
数据集整理： 目的：对数据集中的数据进行预处理，使数据更适合统计分析过程对数据格式的要求； 常见整理要求： 1）建立新的变量，衍生变量，删除某些原变量； 2）…...
自动化完成1000个用户的登录并获取token并生成tokens.txt文件
自动化完成1000个用户的登录并获取token并生成tokens.txt文件 写作背景 在我学习使用redis实现秒杀功能的过程中，在编写完秒杀代码后，需要使用Jmeter实际测试1000个用户进行秒杀，由于秒杀功能需要在用户登录完成后才能实现，用户是…...
2023年全国最新安全员精选真题及答案1
百分百题库提供安全员考试试题、建筑安全员考试预测题、建筑安全员ABC考试真题、安全员证考试题库等，提供在线做题刷题，在线模拟考试，助你考试轻松过关。 11.（单选题）在起重作业中，（）…...
NoMachine 输入用户名密码后 闪断 解决办法
大家好，我是虎哥，最近工作忙，好长时间没有继续套件的深度学习，今天周六，难得有空，泡好茶，打开电脑，链接套件桌面，得，出问题了，一个很奇怪的问题&a…...
WebADI - 参数的使用
* 本文仅供交流分享，不作为专业指导 最近研究了一下WEBADI文档下载的参数，由于网上这块资料较少，所以专意分享下我的笔记。 准备 集成器：BHSC_EMP_ADI 表值集：BHSC_DEPT_LOV（值：dname&#x…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？
🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
【Oracle APEX开发小技巧12】
有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。 我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示 完整代码： SELECTSF.FE…...
xmind转换为markdown
文章目录 解锁思维导图新姿势：将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件（ZIP处理）2.解析JSON数据结构3：递归转换树形结构4：Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...
机器学习的数学基础：线性模型
线性模型 线性模型的基本形式为： f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法，得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...
归并排序：分治思想的高效排序
目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法，由约翰冯诺伊曼在1945年提出。其核心思想包括： 分割(Divide)：将待排序数组递归地分成两个子…...
Windows 下端口占用排查与释放全攻略
Windows 下端口占用排查与释放全攻略 在开发和运维过程中，经常会遇到端口被占用的问题（如 8080、3306 等常用端口）。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口，帮助你高效解决此类问题。 一、准…...
npm安装electron下载太慢，导致报错
npm安装electron下载太慢，导致报错 背景 想学习electron框架做个桌面应用，卡在了安装依赖（无语了）。。。一开始以为node版本或者npm版本太低问题，调整版本后还是报错。偶尔执行install命令后，可以开始下载…...
使用 uv 工具快速部署并管理 vLLM 推理环境
uv：现代 Python 项目管理的高效助手 uv：Rust 驱动的 Python 包管理新时代 在部署大语言模型（LLM）推理服务时，vLLM 是一个备受关注的方案，具备高吞吐、低延迟和对 OpenAI API 的良好兼容性。为了提高部署效…...