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

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

news 2026/5/15 19:00:57

目录

背景

（强烈推荐）实现方法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

如何快速修复分区表：开源数据恢复工具的完整指南

如何快速修复分区表&#xff1a;开源数据恢复工具的完整指南 【免费下载链接】testdisk TestDisk & PhotoRec 项目地址: https://gitcode.com/gh_mirrors/te/testdisk 你是否曾因为误删除重要文件而懊恼不已&#xff1f;是否遇到过分区丢失导致数据无法访问的困境&a…...

编程新知 2026/5/15 17:45:14

独立开发者如何借助Taotoken的Token Plan有效控制月度AI支出

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 独立开发者如何借助Taotoken的Token Plan有效控制月度AI支出 对于独立开发者和小型团队而言&#xff0c;大模型API的调用成本是一个…...

编程新知 2026/5/15 17:12:16

TDAD时间序列异常检测实战：从算法原理到生产部署

1. 项目概述&#xff1a;从零开始理解TDAD最近在GitHub上看到一个名为“TDAD”的项目&#xff0c;仓库地址是zd8899/TDAD。乍一看这个缩写&#xff0c;很多朋友可能会有点懵&#xff0c;这到底是做什么的&#xff1f;是某个新框架&#xff0c;还是一个数据处理工具&#xff1f;…...

编程新知 2026/5/15 16:20:42

AI学术研究技能包：从论文导读到实验设计的全流程自动化助手

1. 项目概述&#xff1a;一个为AI研究助手打造的学术技能包如果你正在用Claude Code、ChatGPT/Codex CLI或者Gemini CLI这类AI编程助手做研究&#xff0c;大概率遇到过这样的场景&#xff1a;想让AI帮你读篇论文&#xff0c;它却只能泛泛而谈&#xff1b;想让AI设计个实验&…...

编程新知 2026/5/15 15:25:49

终极指南：如何在3分钟内找到2000+高质量公开数据集

终极指南&#xff1a;如何在3分钟内找到2000高质量公开数据集 【免费下载链接】awesome-public-datasets A topic-centric list of HQ open datasets. 项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-public-datasets 你是否曾为寻找高质量公开数据集而苦恼…...

编程新知 2026/5/15 14:06:23

保姆级教程：在Ubuntu 20.04上为ARM开发板（如RK3399）交叉编译Mesa图形库（含完整配置与库路径修复）

ARM开发板图形加速实战&#xff1a;RK3399平台Mesa交叉编译与深度优化指南 在嵌入式系统开发中&#xff0c;图形处理能力往往成为决定用户体验的关键因素。RK3399这类高性能ARM开发板搭载的Mali-T860 GPU&#xff0c;理论上能够提供出色的图形渲染性能&#xff0c;但要将这种潜…...

编程新知 2026/5/15 13:08:00

数电期末救星：5分钟搞懂钟控触发器（RS/D/JK/T）的区别与波形图画法

数电期末速成指南&#xff1a;钟控触发器核心要点与波形图实战技巧 期末考试前的最后一晚&#xff0c;数字电路教材上那些密密麻麻的触发器符号和波形图是否让你感到头晕目眩&#xff1f;别担心&#xff0c;本文将用最直接的方式帮你理清钟控触发器的核心逻辑&#xff0c;特别…...

编程新知 2026/5/15 11:21:39

企业微信集成ChatGPT：开源中间件部署与AI助手实战指南

1. 项目概述&#xff1a;一个让企业微信也能“听懂”ChatGPT的桥梁 如果你在企业里负责技术或者运维&#xff0c;大概率会有一个企业微信群&#xff0c;用来接收服务器告警、处理工单或者进行团队协作。当ChatGPT横空出世&#xff0c;展示出强大的对话和问题解决能力时&#x…...

编程新知 2026/5/15 11:13:07

告别笨重MCU：用纯Verilog在FPGA里实现I2C Slave与EEPROM通信

纯Verilog实现FPGA内I2C从机与EEPROM仿真实战指南 当树莓派需要通过I2C读取传感器数据时&#xff0c;传统方案需要外挂一颗AT24C02之类的EEPROM芯片。但如果你手头正好有闲置的FPGA&#xff0c;完全可以用硬件描述语言在可编程逻辑内部虚拟出一个I2C从设备&#xff0c;既能节省…...

编程新知 2026/5/15 11:10:36

Adobe-GenP 3.0：解锁Adobe全家桶功能的5分钟终极指南 [特殊字符]

Adobe-GenP 3.0&#xff1a;解锁Adobe全家桶功能的5分钟终极指南 &#x1f680; 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP Adobe-GenP 3.0是一款强大的Adobe C…...

编程新知 2026/5/15 10:16:13