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

要实现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类对应的样式,所以页面的外观会立即响应这些变化,实现主题的即时切换。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/853084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript 的运行

语法分析预编译解释执行 1.语法分析 语法分析是 JavaScript 引擎处理代码的第一步。 在这个阶段&#xff0c;引擎将源代码字符串分解成一个个的词素&#xff08;token&#xff09;&#xff0c;这些词素是语言中有意义的最小单元&#xff0c;如关键字、变量名、操作符等。 语…

微服务与分布式面试题

什么是RPC远程调用&#xff1f; RPC 的全称是 Remote Procedure Call 是一种进程间通信方式。 它允许程序调用另一个地址空间&#xff08;通常是共享网络的另一台机器上&#xff09;的过程或函数&#xff0c;而不用程序员显式编码这个远程调用的细节。即无论是调用本地接口/服…

深度学习中的热力图

深度学习中的热力图 热力图&#xff08;Heatmap&#xff09;在深度学习中是用于可视化数据、模型预测结果或特征的重要工具。它通过颜色的变化来表示数值的大小&#xff0c;便于直观地理解数据的分布、模型的关注区域以及特征的重要性。以下是深度学习中热力图的主要应用和特点…

Python 正则表达式语法

Python 中的正则表达式是通过 re 模块提供的&#xff0c;它支持大多数正则表达式的语法。以下是一些基本的正则表达式语法元素&#xff1a; 字符匹配: . 匹配任意单个字符&#xff0c;除了换行符。\d 匹配任意数字&#xff0c;等同于 [0-9]。\D 匹配任意非数字字符&#xff0c;…

6个免费自动写文章软件,简直好用到爆

对于创作者而言&#xff0c;创作一篇高质量的文章并非易事&#xff0c;它需要耗费大量的时间与精力去构思、组织语言、斟酌字句。灵感并非总是源源不断&#xff0c;有时我们可能会陷入思维的僵局&#xff0c;不知从何下手。而此时&#xff0c;免费自动写文章软件就如同黑暗中的…

RabbitMQ无法删除unsynchronized队列及解决办法

一、故障环境 操作系统:CentOS7 RabbitMQ:3 nodes Cluster RabbitMQ version: 3.8.12 Erlang Version:22.3 Queue Type:Mirror,with polices 二、故障表现: 2.1 管理界面队列列表中存在部分队列镜像同步状态标红: 2.2 TPS为0,无消费者,其他节点镜像未同步且无法手动…

QBrush 详解

QBrush是Qt框架中的一个类&#xff0c;它用于定义图形的填充模式。QBrush可以用于填充图形项&#xff08;如QGraphicsItem&#xff09;的形状&#xff0c;也可以用于绘制背景等。 关键特性 颜色&#xff1a;QBrush可以设置颜色&#xff0c;用于填充图形。样式&#xff1a;QBr…

C# Web控件与数据感应之模板循环输出

目录 关于模板循环输出 准备数据源 ​范例运行环境 RepeatHtml 方法 设计与实现 如何获取模板内容 getOuterHtml 方法 getInnerHtml 方法 调用示例 小结 关于模板循环输出 数据感应也即数据捆绑&#xff0c;是一种动态的&#xff0c;Web控件与数据源之间的交互&…

Web前端进国企:挑战与机遇并存

Web前端进国企&#xff1a;挑战与机遇并存 随着互联网的飞速发展&#xff0c;Web前端技术已经成为企业信息化建设的重要组成部分。对于许多热衷于前端技术的年轻人来说&#xff0c;进入国企工作既是一种挑战&#xff0c;也是一种机遇。本文将从四个方面、五个方面、六个方面和…

Qt C++ TCP服务端响应多客户端通讯

本示例使用的设备&#xff1a;WIFI无线4G网络RFID云读卡器远程网络开关物流网阅读器TTS语音-淘宝网 (taobao.com) #include "mainwindow.h" #include "ui_mainwindow.h" #include "QMessageBox" #include <QDebug> #include <exceptio…

AI与Python:探索智能化时代的编程利器

AI与Python的强大组合 Python因其简洁易学的语法和丰富的库生态&#xff0c;成为了AI开发的首选语言。无论是数据处理、机器学习还是深度学习&#xff0c;Python都能提供强大的支持。以下是几个常见的AI应用领域&#xff1a; 数据分析与处理 使用Pandas和NumPy库进行数据处理和…

pnpm : 无法加载文件 C:\Users\WTK\AppData\Roaming\npm\pnpm.ps1,因为在此系统上禁止运行脚本。

PS D:\VUE3\vue-pure-admin-main> pnpm i pnpm : 无法加载文件 C:\Users\WTK\AppData\Roaming\npm\pnpm.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/go.microsoft.com/fwlink/?Link ID135170 中的 about_Execution_Policies。 所在…

Lexar NM620 512GB SSD PCIE3.0 X4测评

Lexar NM620 512GB SSD PCIE3.0 X4测评 官方可选容量256GB~2TB PCIE 3.0X4 支持NVME 1.4协议 CDM顺序Read速度3448MB\s CDM顺序Write速度2626MB\s CDM 4K随机Read速度465MB\s CDM 4K随机Write速度602MB\s AS SSD顺序Read速度为2855MB\s AS SSD顺序Write速度为2331MB\s AS SSD…

vue2和vue 3 的响应式原理

vue 3 响应式原理 在 Vue 3 中&#xff0c;响应式系统的核心是使用了 ES6 的 Proxy 对象来实现对数据的拦截和响应式更新。 简单的 Proxy 示例&#xff1a; const data { count: 0 }; const handler {get(target, key, receiver) {// 当访问属性时触发track(target, key);…

几款让你怦然心动的神奇工具——搜嗖工具箱

alteredqualia AlteredQualia 脑洞爆炸器网站&#xff0c;不得不说这是一个神奇的网站&#xff0c;在这个网站上你可以实现不可思议的各种操作&#xff0c;让我们对网站有了新的认知&#xff0c;因为它告诉你不是所有有趣的网站都那么花哨&#xff0c;有些网站看着外形平淡无奇…

Javascript - 请问可以new一个箭头函数吗?

&#x1f690;new操作符的步骤 在JavaScript中&#xff0c;new 操作符用于创建一个对象实例&#xff0c;具体来说&#xff0c;它会执行以下几步操作&#xff1a; 创建一个新对象&#xff1a; 创建一个新的空对象&#xff0c;且这个对象的 __proto__ 属性会被设置为构造函数的 …

LabVIEW结构体内部缺陷振动检测

结构体内部缺陷会改变其振动特性&#xff0c;通过振动分析可以检测并定位这些缺陷。本文详细分析内部缺陷对振动的影响&#xff0c;从频谱分析、时域分析和模态分析等多角度探讨基于LabVIEW的检测方法&#xff0c;提供实施步骤和注意事项&#xff0c;帮助工程师有效利用LabVIEW…

如何解决跨境传输常见的安全及效率问题?

在当今全球化的商业版图中&#xff0c;企业为了拓展国际市场和增强竞争力&#xff0c;跨境传输数据已成为一项不可或缺的业务活动。合格的数据跨境传输方案&#xff0c;应考虑以下要素&#xff1a; 法律合规性&#xff1a;确保方案符合所有相关国家的数据保护法律和国际法规&am…

对大数据的批量导入MySQL数据库

自己的库里有索引在用insert导入数据时会变慢很多 使用事务批量导入 可以配置使用springmybatis整合的方式关闭自动提交事务&#xff08;地址&#xff09;&#xff0c;选择批量导入每一百条导入使用list存储值传入到mybatis中 http://x125858805.iteye.com/blog/2369243 list.a…

c语言中的gets()函数记录

C语言中的gets()函数用于从标准输入&#xff08;通常是键盘&#xff09;中读取一行输入&#xff0c;并将其存储为C字符串。该函数会读取输入直至遇到换行符&#xff08;\n&#xff09;&#xff0c;然后丢弃换行符&#xff0c;将其余字符存储在字符串中&#xff0c;并在字符串末…