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

主题切换之CSS文件篇

news 2026/3/26 16:22:23

动态加载CSS: 利用HTML的标签，可以通过JavaScript动态改变其href属性来加载不同的CSS文件。这意味着我们可以在运行时切换整个页面的样式表，从而实现主题的变化。

分离样式: 将不同主题的样式分别放在不同的CSS文件中。例如，default_styles.css包含日间或默认主题的样式，而night_styles.css则定义了夜间模式的样式。这种分离使得每种主题的样式管理变得清晰且易于维护。

事件驱动: 通过在HTML中绑定事件（如点击事件）到JavaScript函数（如switchTheme），当用户与界面交互（如点击“切换主题”按钮）时，会触发该函数执行，进而切换CSS文件，达到改变页面主题的效果。

这一机制结合了前端页面的动态性与CSS的静态样式定义，通过简单的脚本逻辑实现了用户界面主题的即时切换.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>主题切换示例</title><!-- 初始化时使用默认主题 --><link rel="stylesheet" href="default_styles.css" id="theme-style">
</head>
<body><!-- 主题切换按钮 -->
<button onclick="switchTheme()">切换主题</button><script src="script.js"></script>
</body>
</html>

CSS (default_styles.css)

/* 默认主题样式 */
body {background-color: #ffffff; /* 白色背景 */color: #333333; /* 深灰字体 */
}

CSS (night_styles.css)

/* 夜间主题样式 */
body {background-color: #333333; /* 深灰背景 */color: #ffffff; /* 白色字体 */
}

JavaScript (script.js)


/*** 切换页面主题的函数*/
function switchTheme() {// 获取当前主题样式链接var themeLink = document.getElementById('theme-style');// 根据当前主题链接决定切换到哪个主题if (themeLink.getAttribute('href') === 'default_styles.css') {themeLink.setAttribute('href', 'night_styles.css'); // 切换到夜间主题} else {themeLink.setAttribute('href', 'default_styles.css'); // 切换回默认主题}
}

说明
HTML: 页面中通过标签初始化加载默认主题的CSS文件default_styles.css。按钮点击事件触发switchTheme函数来切换主题。
CSS: 分别创建了两个CSS文件，default_styles.css用于定义默认（日间）主题样式，而night_styles.css定义了夜间主题的样式。这样设计允许完全独立地控制两种主题的视觉元素。
JavaScript: switchTheme函数通过检查当前加载的CSS文件链接，动态改变标签的href属性，从而在默认主题和夜间主题之间进行切换。这种方式虽然需要维护两个独立的CSS文件，但提供了最大的样式定制自由度

相关文章：

主题切换之CSS文件篇

动态加载CSS: 利用HTML的标签&#xff0c;可以通过JavaScript动态改变其href属性来加载不同的CSS文件。这意味着我们可以在运行时切换整个页面的样式表&#xff0c;从而实现主题的变化。 分离样式: 将不同主题的样式分别放在不同的CSS文件中。例如&#xff0c;default_styles.…...

编程日记 2024/6/12 0:59:43

Vue进阶（八十八）前端测试工具介绍

文章目录 一、前言1.1 引入1.2 基础语法1.2.1 全局函数 describe 和 it1.2.2 断言 expect1.2.3 匹配器1.2.4 snapshot 快照1.2.5 测试用例覆盖率报告1.2.6 React Testing Library render1.2.7 screen1.2.8 查询函数1.2.9 waitFor1.2.10 fireEvent 和 userEvent 二、Jest 基本用…...

编程日记 2024/6/12 0:56:38

【录制，纯正人声】OBS录制软件，音频电流音，杂音解决办法，录制有噪声的解决办法

速度解决的方法 &#xff08;1&#xff09;用RNNoise去除噪声。RNNoise是一个开源的&#xff0c;效果不好的噪声去除器。使用方法就是点击滤镜&#xff0c;然后加噪声抑制RNNoise。【这方法不好用】 &#xff08;2&#xff09;用Krisp(https://krisp.ai/) 去除噪声。这个Kris…...

编程日记 2024/6/12 0:55:38

Django中drf动态过滤查询

Django中drf动态过滤查询 1、page.py 代码： from rest_framework.pagination import PageNumberPaginationclass UserPagination(PageNumberPagination):"""用户分页器"""page_size = 10 # 默认的页面数据数量page_query_param = page # 定…...

编程日记 2024/6/12 0:54:37

GTSAM | gtsam::PriorFactor

文章目录 概述一、定义介绍二、功能作用三、主要内容四、实例演示概述 本节介绍了GTSAM中的gtsam::PriorFactor类。 一、定义介绍 gtsam::PriorFactor 是 GTSAM（Graph-based Trajectory and Mapping）库中的一个类，用于定义先验因子。在因子图优化中，先验因子用于将一些变量…...

编程日记 2024/6/12 0:53:36

MMSegmentation改进：增加Kappa系数评价指数

将mmseg\evaluation\metrics\iou_metric.py文件中的内容替换成以下内容即可&#xff1a; 支持输出单类Kappa系数和平均Kappa系数。 使用方法&#xff1a;将dataset的config文件中&#xff1a;val_evaluator 添加mKappa&#xff0c;如 val_evaluator dict(typemmseg.IoUMetri…...

编程日记 2024/6/12 0:51:34

专栏【汇总】

专栏【汇总】 前言版权推荐专栏【汇总】付费 汇总置顶在读在学我的面试计算机重要课程java面试Java基础数据存储Java框架java提高计算机科学与技术课程算法杂项 最后 前言 2024-5-12 21:13:02 以下内容源自《【专栏】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此…...

编程日记 2024/6/12 0:50:33

成功解决IndexError: index 0 is out of bounds for axis 1 with size 0

成功解决IndexError: index 0 is out of bounds for axis 1 with size 0 &#x1f6e0;️ 成功解决IndexError: index 0 is out of bounds for axis 1 with size 0摘要引言正文内容&#xff08;详细介绍&#xff09;&#x1f914; 错误分析&#xff1a;为什么会发生IndexError&…...

编程日记 2024/6/12 0:49:32

C# MES通信从入门到精通（11）——C#如何使用Json字符串

前言 我们在开发上位机软件的过程中&#xff0c;经常需要和Mes系统进行数据交互&#xff0c;并且最常用的数据格式是Json&#xff0c;本文就是详细介绍Json格式的类型&#xff0c;以及我们在与mes系统进行交互时如何组织Json数据。 1、在C#中如何调用Json 在C#中调用Json相关…...

编程日记 2024/6/12 0:46:29

ON DUPLICATE KEY UPDATE 子句

ON DUPLICATE KEY UPDATE 是 MySQL 中的一个 SQL 语句中的子句&#xff0c;主要用于在执行 INSERT 操作时处理可能出现的重复键值冲突。当尝试插入的记录导致唯一索引或主键约束冲突时&#xff08;即试图插入的记录的键值已经存在于表中&#xff09;&#xff0c;此子句会触发一…...

编程日记 2024/6/12 0:45:28

perl use HTTP::Server::Simple 轻量级 http server

cpan -i HTTP::Server::Simple 返回&#xff1a;已是 up to date. 但是我在 D:\Strawberry\perl\site\lib\ 找不到 HTTP\Server 手工安装&#xff1a;下载 HTTP-Server-Simple-0.52.tar.gz 解压 tar zxvf HTTP-Server-Simple-0.52.tar.gz cd D:\perl\HTTP-Server-Simple-…...

编程日记 2024/6/12 0:44:28

【STM32】基于I2C协议的OLED显示(利用U82G库)

【STM32】基于I2C协议的OLED显示(利用U82G库) 文章目录 【STM32】基于I2C协议的OLED显示(利用U82G库)一、实验背景二、U8g2介绍&#xff08;一&#xff09;获取&#xff08;二&#xff09;简介 三、实践&#xff08;一&#xff09;CubexMX配置&#xff08;二&#xff09;U8g2配…...

编程日记 2024/6/12 0:43:26

掌握Python3输入输出：轻松实现用户交互、日志记录与数据处理

Python 是一门简洁且强大的编程语言&#xff0c;广泛应用于各个领域。在 Python 编程中&#xff0c;输入和输出是基本而重要的操作。无论是进行用户交互、记录日志信息&#xff0c;还是将计算结果输出到控制台或文件&#xff0c;掌握这些操作都是编写高效 Python 程序的关键。本…...

编程日记 2024/6/12 0:42:25

用于每个平台的最佳WordPress LMS主题

你已选择在 WordPress 上构建学习管理系统 (LMS)了。恭喜&#xff01; 你甚至可能已经选择了要使用的 LMS 插件&#xff0c;这已经是成功的一半了。 现在是时候弄清楚哪个 WordPress LMS 主题要与你的插件配对。 我将解释 LMS 主题和插件之间的区别&#xff0c;以便你了解要…...

编程日记 2024/6/12 0:39:22

pytorch 加权CE_loss实现（语义分割中的类不平衡使用）

加权CE_loss和BCE_loss稍有不同 1.标签为long类型&#xff0c;BCE标签为float类型 2.当reduction为mean时计算每个像素点的损失的平均&#xff0c;BCE除以像素数得到平均值&#xff0c;CE除以像素对应的权重之和得到平均值。 参数配置torch.nn.CrossEntropyLoss(weightNone,…...

编程日记 2024/6/12 0:38:20

【iOS】UI——关于UIAlertController类（警告对话框）

目录 前言关于UIAlertController具体操作及代码实现总结 前言 在UI的警告对话框的学习中&#xff0c;我们发现UIAlertView在iOS 9中已经被废弃&#xff0c;我们找到UIAlertController来代替UIAlertView实现弹出框的功能&#xff0c;从而有了这篇关于UIAlertController的学习笔记…...

编程日记 2024/6/12 0:36:18

django支持https

测试环境&#xff0c;可以用django自带的证书 安装模块 sudo pip3 install django_sslserver服务端https启动 python3 manage.py runsslserver 127.0.0.1:8001https访问 https://127.0.0.1:8001/quota/api/XXX...

编程日记 2024/6/12 0:34:12

算法题day41（补5.27日卡：动态规划01）

一、动态规划基础知识&#xff1a;在动态规划中每一个状态一定是由上一个状态推导出来的。 动态规划五部曲&#xff1a; 1.确定dp数组 以及下标的含义 2.确定递推公式 3.dp数组如何初始化 4.确定遍历顺序 5.举例推导dp数组 debug方式&#xff1a;打印 二、刷题&#xf…...

编程日记 2024/6/12 0:33:11

【附带源码】机械臂MoveIt2极简教程（四）、第一个入门demo

系列文章目录 【附带源码】机械臂MoveIt2极简教程（一）、moveit2安装 【附带源码】机械臂MoveIt2极简教程（二）、move_group交互 【附带源码】机械臂MoveIt2极简教程（三）、URDF/SRDF介绍 【附带源码】机械臂MoveIt2极简教程（四）、第一个入门demo 目录 系列文章目录1. 创…...

编程日记 2024/6/12 0:32:10

基于蚁群算法的二维路径规划算法(matlab)

微♥关注“电击小子程高兴的MATLAB小屋”获得资料 一、理论基础 1、路径规划算法 路径规划算法是指在有障碍物的工作环境中寻找一条从起点到终点、无碰撞地绕过所有障碍物的运动路径。路径规划算法较多&#xff0c;大体上可分为全局路径规划算法和局部路径规划算法两大类。其…...

编程日记 2024/6/12 0:31:09

打卡信奥刷题（3016）用C++实现信奥题 P6334 [COCI 2007/2008 #1] SREDNJI

P6334 [COCI 2007/2008 #1] SREDNJI 题目描述 给定一个长度为 nnn 的 1∼n1\sim n1∼n 的排列 a1,…,ana_1,\dots ,a_na1​,…,an​&#xff0c;请你找出这个排列有多少个长度为奇数的子串的中位数为 BBB。 子串定义&#xff1a;把这个排列从开头&#xff08;可能无&#xff…...

编程新知 2026/3/26 15:11:58

Linux下用qemu-nbd挂载qcow2镜像的完整指南（含LVM/非LVM/ntfs场景）

Linux下用qemu-nbd挂载qcow2镜像的完整指南&#xff08;含LVM/非LVM/ntfs场景&#xff09; 当虚拟机突然崩溃或需要从镜像中提取关键数据时&#xff0c;直接挂载qcow2镜像往往是最直接的解决方案。不同于常规磁盘挂载&#xff0c;qcow2镜像可能包含复杂的存储结构——从简单的e…...

编程新知 2026/3/26 13:02:55

别再死磕公式了！用Ansoft Maxwell 2D给永磁无刷电机做仿真，保姆级操作流程（附避坑点）

永磁无刷电机仿真实战&#xff1a;从零掌握Ansoft Maxwell 2D的高效工作流 第一次打开Ansoft Maxwell 2D时&#xff0c;满屏的专业术语和复杂的参数设置界面确实容易让人望而生畏。作为从业十年的电机设计工程师&#xff0c;我完全理解这种面对专业仿真软件时的无力感——理论书…...

编程新知 2026/3/26 13:02:53

C语言文件操作实战：用fread和fwrite处理二进制数据的5个常见场景

C语言文件操作实战&#xff1a;用fread和fwrite处理二进制数据的5个常见场景 在嵌入式系统开发、游戏编程和工业控制等领域&#xff0c;二进制文件操作往往是数据持久化的核心手段。与文本文件相比&#xff0c;二进制格式能更精确地保存内存数据布局&#xff0c;避免字符编码转…...

编程新知 2026/3/26 12:00:01

OpenClaw版本升级：GLM-4.7-Flash环境无缝迁移指南

OpenClaw版本升级&#xff1a;GLM-4.7-Flash环境无缝迁移指南 1. 为什么需要升级&#xff1f; 上周我在本地开发环境遇到一个棘手问题&#xff1a;OpenClaw的旧版本无法正确解析GLM-4.7-Flash模型返回的JSON响应。经过排查发现是框架对数组嵌套结构的处理存在兼容性问题。这促…...

编程新知 2026/3/26 11:53:59

探索CLIP-ViT-H-14：5大突破重新定义多模态AI应用

探索CLIP-ViT-H-14&#xff1a;5大突破重新定义多模态AI应用 【免费下载链接】CLIP-ViT-H-14-laion2B-s32B-b79K 项目地址: https://ai.gitcode.com/hf_mirrors/laion/CLIP-ViT-H-14-laion2B-s32B-b79K 你是否想过让计算机像人类一样同时理解图像和文字&#xff1f;CLI…...

编程新知 2026/3/26 11:21:54

终极指南：如何在ComfyUI中掌握IPAdapter Plus图像风格迁移技术

终极指南&#xff1a;如何在ComfyUI中掌握IPAdapter Plus图像风格迁移技术 【免费下载链接】ComfyUI_IPAdapter_plus 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI_IPAdapter_plus 在AI图像生成领域&#xff0c;ComfyUI IPAdapter Plus插件正在成为图像风格迁…...

编程新知 2026/3/26 10:51:27

新手必看，在快马平台上手mcp，从零理解模型上下文协议的核心机制

今天想和大家分享一个特别适合新手理解MCP&#xff08;模型上下文协议&#xff09;的小项目。作为一个刚接触AI开发不久的人&#xff0c;我发现在InsCode(快马)平台上学习这些概念特别方便&#xff0c;尤其是它能把复杂的协议用实际代码展示出来。 MCP简单来说就是AI模型和外部…...

编程新知 2026/3/26 10:35:23

AI教材生成法宝！低查重完成教材编写，快来获取高性价比方案！

选择AI教材生成工具&#xff0c;摆脱创作难题 在编写教材的过程中&#xff0c;选择合适的工具真是个让人头疼的问题&#xff01;如果用办公软件&#xff0c;功能局限&#xff0c;很多格式和框架都需要自己手动调整&#xff1b;而如果试图使用一些专业的AI写教材工具&#xff0…...

编程新知 2026/3/26 10:17:15

UNet全维度改进模型库重磅发布

突破边界&#xff0c;赋能工业质检&#xff1a;UNet全维度改进模型库重磅发布 在工业缺陷检测领域&#xff0c;分割精度与效率的平衡始终是技术落地的核心命题。我们倾力打造**「UNet全维度改进模型库」&#xff0c;以37项原创性结构创新为引擎&#xff0c;深度融合注意力机制…...

编程新知 2026/3/26 10:05:11