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

（简单有案例）前端实现主题切换、动态换肤的两种简单方式

news 2025/10/22 21:12:29

目录

背景

（强烈推荐）实现方法1：CSS中原生变量“--”和var()

步骤1：定义css变量

 步骤2：使用CSS变量

步骤3：切换主题

实现完整案例

实现方法2：link 动态引入

背景

我们需要做一个功能，类似动态换肤这种功能。实现方式无非两种，一种是css变量、另一种是link动态引入

（强烈推荐）实现方法1：CSS中原生变量“--”和var()

步骤1：定义css变量

属性名：

  • 属性名必须使用 --开头
  • 在:root中定义（root后面的参数用来区分是哪个主题样式 :root[theme='主题名称']）
  • 可以是数字、字母、下划线、中划线

属性值：

  • css普通属性可以用的，比如：数字、文本、带单位的长度、角度等等都可以作为属性值

注意点

  • 大小写敏感：大写 和 小写 不同 的2个属性名，将会是2个属性
  • 计算时有效性：自定义属性值可以是任何内容，甚至可能不是css的有效数值，但这并不影响定义，只要保证在使用css自定义属性的地方，最终的计算结果是有效的就可以了。

案例

 /* 默认主题 */:root {--color: yellow}/* 蓝色主题 */:root[theme='blue'] {--color: blue}/* 红色主题 */:root[theme='red'] {--color: red}

 步骤2：使用CSS变量

  • css提供了一个var()方法，进行自定义属性值的获取。可以在多个地方获取到自定义的属性值。
  • css也提供了calc()方法，进行数值的计算。它里面就可以通过var()使用自定属性的值进行计算。
:root {--size: 100px;
}div1 {width: var(--size);
}div2 {width: calc(var(--size) - 2px);
}

步骤3：切换主题

思路

切换html标签上的theme属性的值，来实现切换对应的主题。

theme属性的值为root后的参数 主题名称（:root[theme="主题名称"]），如果无theme，或者未匹配上对应的就使用，默认的root。

document.documentElement.setAttribute('theme', "要切换的主题名称")

实现完整案例

<!DOCTYPE html>
<html lang="en" theme="blue"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* 默认主题 */:root {--color: yellow}/* 蓝色主题 */:root[theme='blue'] {--color: blue}/* 红色主题 */:root[theme='red'] {--color: red}h1 {color: var(--color)}
</style><body><h1>点击我切换主题</h1>
</body>
<script>const data = document.getElementsByTagName('h1')data[0].onclick = () => {document.documentElement.setAttribute('theme', "red")}
</script></html>

实现方法2：link 动态引入

通过改变link 标签的 href 属性实现动态修改样式（暂不推荐这种方案）

优点：实现了按需加载，提高了性能；

缺点：动态加载样式文件，可能会因为网络问题导致样式加载过慢；

           可维护性较差，后续新增或修改主题较为麻烦。

相关文章：

（简单有案例）前端实现主题切换、动态换肤的两种简单方式

目录 背景 &#xff08;强烈推荐&#xff09;实现方法1&#xff1a;CSS中原生变量“--”和var() 步骤1&#xff1a;定义css变量 步骤2&#xff1a;使用CSS变量 步骤3&#xff1a;切换主题 实现完整案例 实现方法2&#xff1a;link 动态引入 背景 我们需要做一个功能&#…...

编程日记 2024/2/10 12:54:59

wyh的迷宫

涉及知识点&#xff1a;求迷宫能否到达终点的&#xff0c;而不是求路径数的&#xff0c;用bfs时可以不用重置状态数组&#xff08;回溯&#xff09;。 题目描述 给你一个n*m的迷宫&#xff0c;这个迷宫中有以下几个标识&#xff1a; s代表起点 t代表终点 x代表障碍物 .代…...

编程日记 2024/2/10 12:53:58

AWS云用户创建

问题 需要给工友创建AWS云的用户&#xff0c;这里假设使用分配给自己AWS开发者IAM账号&#xff0c;给别人创建aws IAM账号。 登录系统 打开页面&#xff1a;https://xxx.signin.aws.amazon.com/console&#xff0c;使用分配的开发者账号登录。如下图&#xff1a; 创建用户…...

编程日记 2024/2/10 12:50:55

微信小程序（三十七）选项点击高亮效果

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.选择性渲染类 2.以数字为需渲染内容&#xff08;数量&#xff09; 源码&#xff1a; index.wxml <view class"Area"><!-- {{activeNumindex?Active:}}是选择性添加类名进行渲染 -->&l…...

编程日记 2024/2/10 12:48:02

通过Demo学WPF—数据绑定（二）

准备 今天学习的Demo是Data Binding中的Linq&#xff1a; 创建一个空白解决方案&#xff0c;然后添加现有项目&#xff0c;选择Linq&#xff0c;解决方案如下所示&#xff1a; 查看这个Demo的效果&#xff1a; 开始学习这个Demo xaml部分 查看MainWindow.xaml&#xff1a; …...

编程日记 2024/2/10 12:44:59

数据湖的整体思路

湖本质上是一个集中化&#xff0c;中心化的&#xff0c;一体化的存储技术&#xff0c;并且在其之上追求技术架构的统一化&#xff0c;如流批一体&#xff0c;服务分析一体化。 当数据湖成为中心&#xff0c;那么就可以围湖而建“数据服务环”&#xff0c;环上的服务包括了数仓、…...

编程日记 2024/2/10 12:43:58

51单片机 跑马灯

#include <reg52.h>//毫秒级延时函数 void delay(int z) {int x,y;for(x z; x > 0; x--)for(y 114; y > 0 ; y--); }sbit LED1 P1^0x0; sbit LED2 P1^0x1; sbit LED3 P1^0x2; sbit LED4 P1^0x3; sbit LED5 P1^0x4; sbit LED6 P1^0x5; sbit LED7 P1^0x6; s…...

编程日记 2024/2/10 12:41:55

迎新年年终总结

迎新年年终总结 1、除夕迎新年登高有感 1、除夕迎新年登高有感 除旧岁&#xff0c;迎新年。凭栏立&#xff0c;意阑珊。 天空阔&#xff0c;世道艰。唯自强&#xff0c;可彼岸。 于2024年2月9日 10:51。...

编程日记 2024/2/10 12:40:54

一台服务器可以支持多少TCP连接

前言 ​ 在linux系统中一切皆文件&#xff0c;每当有一个tcp连接建立&#xff0c;那么就会打开一个文件描述符。在Linux系统中&#xff0c;文件描述符打开的个数是有限制的&#xff0c;当超过这个限制的时候内核就会跑出too many open files异常。 ​ linux上能打开的最大文件…...

编程日记 2024/2/10 12:37:51

svg基础（六）滤镜-图像，光照效果（漫反射，镜面反射），组合

1 feImage&#xff1a;图像滤镜 feImage 滤镜从外部来源取得图像数据&#xff0c;并提供像素数据作为输出&#xff08;意味着如果外部来源是一个 SVG 图像&#xff0c;这个图像将被栅格化。&#xff09; 1.1 用法: <feImage x"" y"" width"&quo…...

编程日记 2024/2/10 12:32:45

电脑数据误删如何恢复？9 个Windows 数据恢复方案

无论您是由于软件或硬件故障、网络犯罪还是意外删除而丢失数据&#xff0c;数据丢失都会带来压力和令人不快。 如今的企业通常将其重要数据存储在云或硬盘上。但在执行其中任何一项操作之前&#xff0c;您很有可能会丢失数据。 数据丢失的主要原因是意外删除&#xff0c;任何…...

编程日记 2024/2/10 12:31:44

【doghead】uv_loop_t的创建及线程执行

worker测试程序，类似mediasoup对uv的使用，是one loop per thread 。创建一个UVLoop 就可以创建一个uv_loop_t Transport 创建一个： 试验配置创建一个： UvLoop 封装了libuv的uv_loop_t ，作为共享指针提供 对uv_loop_t 创建并初始化...

编程日记 2024/2/10 12:29:41

云计算运营模式介绍

目录 一、云计算运营模式概述 1.1 概述 二、云计算服务角色 2.1 角色划分 2.1.1 云服务提供商 2.1.2 云服务消费者 2.1.3 云服务代理商 2.1.4 云计算审计员 2.1.5 云服务承运商 三、云计算责任模型 3.1 云计算服务模式与责任关系图 3.2 云计算服务模式与责任关系解析…...

编程日记 2024/2/10 12:28:40

物资捐赠管理系统

文章目录 物资捐赠管理系统一、项目演示二、项目介绍三、系统部分功能截图四、部分代码展示五、底部获取项目&#xff08;9.9&#xffe5;带走&#xff09; 物资捐赠管理系统 一、项目演示 爱心捐赠系统 二、项目介绍 基于springboot的爱心捐赠管理系统 开发语言&#xff1a…...

编程日记 2024/2/10 12:27:38

YOLOv8改进 | 检测头篇 | 独创RFAHead检测头超分辨率重构检测头（适用Pose、分割、目标检测）

一、本文介绍 本文给大家带来的改进机制是RFAHead，该检测头为我独家全网首发，本文主要利用将空间注意力机制与卷积操作相结合的卷积RFAConv来优化检测头，其核心在于优化卷积核的工作方式，特别是在处理感受野内的空间特征时。RFAConv主要的优点就是增加模型的特征提取能力，…...

编程日记 2024/2/10 12:25:36

私有化部署一个吃豆人小游戏

目录 效果 安装步骤 1.安装并启动httpd 2.下载代码 3.启动httpd 使用 效果 安装步骤 1.安装并启动httpd yum -y install httpd 2.下载代码 进入目录 cd /var/www/html/ 下载 git clone https://gitee.com/WangZhe168_admin/pacman-canvas.git 3.启动httpd syste…...

编程日记 2024/2/10 12:21:33

社区店经营管理新思路：提升业绩的秘诀

作为一名资深的鲜奶吧创业者&#xff0c;我深知在社区经营一家店铺所面临的挑战与机遇。经过5年的探索与实践&#xff0c;我总结出了一套提升社区店业绩的秘诀&#xff0c;今天就和大家分享一下。 一、明确目标客户群体&#xff0c;精准定位 在社区开店&#xff0c;首先要明确…...

编程日记 2024/2/10 12:20:32

统一数据格式返回，统一异常处理

目录 1.统一数据格式返回 2.统一异常处理 3.接口返回String类型问题 1.统一数据格式返回 添加ControllerAdvice注解实现ResponseBodyAdvice接口重写supports方法&#xff0c;beforeBodyWrite方法 /*** 统一数据格式返回的保底类 对于一些非对象的数据的再统一 即非对象的封…...

编程日记 2024/2/10 12:19:31

arm 平台安装snort3

本文来自原创，转载请说明来源。谢谢配合。 选择初衷 最近在学习渗透相关课程，回想起曾经拥有自己的域名和服务器的经历。不幸的是，服务器被注入了木马文件，起初并没有察觉。直到我加入了定时任务，才发现了这个问题。当时我下定决心要打造一个安全的网站，以保护自己的网…...

编程日记 2024/2/10 12:17:29

【Ubuntu 20.04/22.04 LTS】最新 esp-matter SDK 软件编译环境搭建步骤

仓库链接&#xff1a;esp-matter SDK官方软件说明&#xff1a;ESP Matter Programming Guide官方参考文档&#xff1a;使用 Matter-SDK 快速搭建 Matter 环境 (Linux) 环境要求 Ubuntu 20.04 或 Ubuntu22.04网络环境支持访问 Gihub 在安装 esp-matter SDK 软件编译环境之前&a…...

编程日记 2024/2/10 12:16:28

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/10/22 5:35:12

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/9/19 12:51:08

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/10/21 23:40:05

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2025/10/21 14:17:05

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2025/10/22 17:01:10

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/10/11 21:14:25

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2025/10/21 23:38:11

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2025/10/11 17:19:51

LangChain【6】之输出解析器：结构化LLM响应的关键工具

文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器&#xff1f;1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...

编程新知 2025/10/4 5:55:58