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

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

news 2026/2/2 14:59:50

需求：

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

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

.....

思路：

  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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2026/1/27 10:50:07

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/1/26 22:19:39

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2026/1/21 18:20:51

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/2 1:12:33

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/1/22 11:16:26

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2026/2/2 14:56:57

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2026/1/26 18:21:02