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

主题切换之根元素CSS自定义类

news 2026/2/8 0:38:18

要实现CSS样式的主题切换，可以通过在HTML中添加一个按钮来触发JavaScript事件，进而通过JavaScript动态修改HTML元素的class或直接切换CSS文件，以达到改变页面整体风格的目的。以下是实现这一功能的步骤、原理及代码示例。

原理：

  1. HTML结构：提供一个用户界面元素（如按钮）来触发切换操作。
  2. CSS样式：定义两套样式，一套为默认主题，另一套为备用主题（比如夜间模式）。备用主题的样式通常通过类名（如.night-mode)来控制。
  3. JavaScript：编写逻辑来响应用户的切换请求，通过修改HTML元素的class或更改<link>标签的href属性来应用新的主题样式。

示例代码：

HTML (index.html)
html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>主题切换示例</title><!-- 引入默认CSS样式 --><link rel="stylesheet" href="styles.css" id="themeStyles">
</head>
<body><header><h1>主题切换演示</h1></header><main><p>这是一个示例文本，用于展示主题切换效果。</p><button id="toggleTheme">切换主题</button></main><!-- 引入JavaScript文件 --><script src="script.js"></script>
</body>
</html>
CSS (styles.css)
css/* 默认主题样式 */
body {background-color: white;color: black;
}/* 夜间主题样式，通过类名控制 */
body.night-mode {background-color: #333;color: white;
}
JavaScript (script.js)
javascript// 获取切换主题按钮
const toggleButton = document.getElementById('toggleTheme');// 定义切换主题的函数
function toggleTheme() {// 获取当前文档的根元素，即bodyconst bodyElement = document.body;// 判断是否已应用夜间模式类名if (bodyElement.classList.contains('night-mode')) {// 如果已应用，移除它，恢复到默认主题bodyElement.classList.remove('night-mode');} else {// 如果未应用，添加夜间模式类名bodyElement.classList.add('night-mode');}
}// 绑定按钮点击事件
toggleButton.addEventListener('click', toggleTheme);

过程说明：

  1. 用户访问页面时，看到的是由styles.css定义的默认主题样式。
  2. 当用户点击“切换主题”按钮时，会触发toggleTheme函数。
  3. toggleTheme函数通过检查body元素是否具有.night-mode类来判断当前主题，并据此添加或移除该类，从而在默认主题和夜间主题之间切换。
  4. 由于CSS中已经定义了.night-mode类对应的样式，所以页面的外观会立即响应这些变化，实现主题的即时切换。

相关文章：

主题切换之根元素CSS自定义类

要实现CSS样式的主题切换&#xff0c;可以通过在HTML中添加一个按钮来触发JavaScript事件&#xff0c;进而通过JavaScript动态修改HTML元素的class或直接切换CSS文件&#xff0c;以达到改变页面整体风格的目的。以下是实现这一功能的步骤、原理及代码示例。 原理&#xff1a; …...

编程日记 2024/6/15 9:41:09

如何在 ASP.NET Core Web Api 项目中应用 NLog 写日志？

前言 昨天分享了在 .NET Core Console 项目中应用 NLog 写日志的详细例子&#xff0c;有几位小伙伴私信说 ASP.NET Core Web Api 项目中无法使用&#xff0c;其实在 ASP.NET Core Web Api 项目中应用 NLog 写日志&#xff0c;跟 .NET Core Console 项目是有些不一样的&#xf…...

编程日记 2024/6/15 9:40:06

selenium execute_script常用方法汇总

driver.execute_script() 是 Selenium WebDriver 中非常强大且灵活的功能&#xff0c;可以用来执行任意的 JavaScript 代码在浏览器上下文中。以下是一些常用的 execute_script() 方法的例子和用法&#xff1a; 修改元素的属性和值 python# 修改输入框的值 driver.execute_sc…...

编程日记 2024/6/15 9:39:03

如何选择最佳的APP封装平台-小猪APP分发为您解忧

在开发移动应用程序的过程中&#xff0c;选择一个可靠的APP封装平台显得尤为重要。无论你是初创企业还是大型企业&#xff0c;找到一个合适的平台可以大大简化你的开发流程。如何选择最佳的APP封装平台呢&#xff1f;今天我们就来聊聊这个话题&#xff0c;并重点介绍一下小猪AP…...

编程日记 2024/6/15 9:38:02

Linux基础 （十八）：Libevent 库的安装与使用

目录 一、Libevent 概述 1.0 Libevent的安装 1.0.1 使用源码方式 1.0.2 终端命令行安装 1.1 主要特性 1.2 主要组件 1.3 Libevent 使用模型 1.4 原理 1.5 使用的基本步骤 1.5.1 初始化事件基础设施 1.5.2. 创建和绑定服务器套接字 1.5.3. 设置监听事件 1.5.4. 定义…...

编程日记 2024/6/15 9:33:57

冒泡排序的详细介绍 , 以及c , python , Java的实现方法

冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法&#xff0c;它重复地遍历要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果他们的顺序错误就把他们交换过来。遍历数列的工作是重复地进行直到没有再需要交换&#xff0c;也就是说该数列已经排序完成…...

编程日记 2024/6/15 9:32:55

使用llama.cpp实现LLM大模型的格式转换、量化、推理、部署

使用llama.cpp实现LLM大模型的格式转换、量化、推理、部署 概述 llama.cpp的主要目标是能够在各种硬件上实现LLM推理&#xff0c;只需最少的设置&#xff0c;并提供最先进的性能。提供1.5位、2位、3位、4位、5位、6位和8位整数量化&#xff0c;以加快推理速度并减少内存使用。…...

编程日记 2024/6/15 9:31:54

给你一个扫码支付的二维码，如何写测试用例？

前言 面试的时候&#xff0c;经常会临场出题&#xff1a;给你一个xxx, 如何测试, 或者说如何写测试用例&#xff1f;xxx可以是圆珠笔&#xff0c;水杯&#xff0c;电梯等生活中常见的场景。 那么给你一个支付的二维码&#xff0c;如何写测试用例呢&#xff1f; 二维码扫码支…...

编程日记 2024/6/15 9:29:50

计算机专业在未来的发展与抉择

目录 前言 计算机专业的发展历史 计算机专业的前景 计算机专业的挑战 如何判断自己是否适合计算机专业 计算机行业的未来发展态势 作为过来人和从业者 前言 随着2024年高考落幕&#xff0c;数百万高三学生又将面临人生中的重要抉择&#xff1a;选择大学专业。在这个关键…...

编程日记 2024/6/15 9:27:48

【Linux】基础IO——文件描述符，重定向

话接上篇&#xff1a; 1.文件描述符fd 磁盘文件 VS 内存文件&#xff1f; 当文件存储在磁盘当中时&#xff0c;我们将其称之为磁盘文件&#xff0c;而当磁盘文件被加载到内存当中后&#xff0c;我们将加载到内存当中的文件称之为内存文件。磁盘文件和内存文件之间的关系就像程…...

编程日记 2024/6/15 9:25:46

1.0 Android中Activity的基础知识

一&#xff1a;Activity的定义 Activity是一个应用组件&#xff0c;它提供了一个用户界面&#xff0c;允许用户执行一个单一的、明确的操作&#xff0c;用户看的见的操作都是在activity中执行的。Activity的实现需要在manifest中进行定义&#xff0c;不让会造成程序报错。 1.…...

编程日记 2024/6/15 9:24:45

线代知识点总结

目录 一.初等行/列变换 1.计算行列式时&#xff0c;行列变换都可 2.求矩阵的秩时&#xff0c;行列变换都可 3.解线性方程组时&#xff0c;仅能使用初等行变换 4.判定解的情况&#xff0c;单纯求r(A),r(A,b)的过程行列变换都可 5.求向量组极大无关组、线性表出关系&#x…...

编程日记 2024/6/15 9:23:43

案例学习-存量更新规划实施探索（武汉）

案例学习-存量更新规划实施探索&#xff08;武汉&#xff09; 武汉市在早期旧城更新实践中发现零散化的更新往往导致资源配置分散、城市建设破碎化等弊病&#xff0c;特别是由于过于强调项目自身“经济平衡”&#xff0c;在实施过程中也逐步暴露出住宅占比过大、强度偏高、公服…...

编程日记 2024/6/15 9:22:41

C#操作MySQL从入门到精通(17)——使用联结

前言： 我们在查询数据的过程中有时候查询的数据不是来自一个表而是来自多个表，本文使用的测试数据如下： 本文使用了两个表student_info、address_info student_info的数据如下： address_info的数据如下： 1、内联结 所谓内联结就是求交集，两个表都有的数据才是有效数…...

编程日记 2024/6/15 9:21:40

MyBatis 关于查询语句上配置的详细内容

1. MyBatis 关于查询语句上配置的详细内容 文章目录 1. MyBatis 关于查询语句上配置的详细内容2. 准备工作3. SQL查询结果&#xff0c;返回为POJO实体类型4. SQL查询结果&#xff0c;返回为List<POJO\> 集合类型5. SQL查询结果&#xff0c;返回为Map 集合6. SQL查询结果&…...

编程日记 2024/6/15 9:20:38

基于STM32和人工智能的智能家居监控系统

目录 引言环境准备智能家居监控系统基础代码实现&#xff1a;实现智能家居监控系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统4.4 用户界面与数据可视化应用场景&#xff1a;智能家居管理与优化问题解决方案与优化收尾与总结 1. 引言 随着智能家居技术的快速发展&…...

编程日记 2024/6/15 9:19:37

这三款使用的视频、图片设计工具，提供工作效率

Videograp Videograp是一款专注于视频生成的工具&#xff0c;特别适合需要快速剪辑和编辑视频的用户。Videograp具备以下特点&#xff1a; 影音比例转换&#xff1a;Videograp支持调整视频的分辨率和比例&#xff0c;使其更适合不同的播放环境和设备。 AI快剪&#xff1a;该工…...

编程日记 2024/6/15 9:18:34

[Algorithm][贪心][最长递增子序列][递增的三元子序列][最长连续递增序列][买卖股票的最佳时机][买卖股票的最佳时机Ⅱ]详细讲解

目录 1.最长递增子序列1.题目链接2.算法原理详解3.代码实现 2.递增的三元子序列1.题目链接2.算法原理详解3.题目链接 3.最长连续递增序列1.题目链接2.算法原理详解3.代码实现 4.买卖股票的最佳时机1.题目链接2.算法原理详解3.代码实现 5.买卖股票的最佳时机 II1.题目链接2.算法…...

编程日记 2024/6/15 9:17:32

手把手教你入门vue+springboot开发（三）--登录功能后端

文章目录 前言一、redis安装二、后端代码1.修改application.yml文件2.增加utils文件3.增加Result类4.修改UserController类5.修改UserMapper类6.修改UserService和UserServiceImpl类7.增加LoginInterceptor类8.增加WebConfig类9.修改pom.xml文件 前言 前两篇我们用vuespringbo…...

编程日记 2024/6/15 9:16:31

三款有3D效果的js图表库

1、G2简洁的渐进式可视化语法。https://g2.antv.antgroup.com/manual/extra-topics/3d-charts 2、 https://www.highcharts.com/https://www.highcharts.com/ 3、https://www.fusioncharts.com/charts/pie-doughnut-charts/donut-chart-in-3d?frameworkjavascripthttps://www…...

编程日记 2024/6/15 9:14:28

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/7 7:53:36

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2026/2/5 4:39:34

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2026/1/24 14:15:43

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/1/24 20:17:55

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2026/1/27 2:41:27

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/11/10 19:07:59