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…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
反射获取方法和属性
Java反射获取方法 在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
Java毕业设计：WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发，实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构，服务器端使用Java Servlet处理请求，数据库采用MySQL存储信息࿰…...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...
用 Rust 重写 Linux 内核模块实战：迈向安全内核的新篇章
用 Rust 重写 Linux 内核模块实战：迈向安全内核的新篇章 摘要： 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言，受限于 C 语言本身的内存安全和并发安全问题，开发复杂模块极易引入难以…...