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

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

news 2025/9/1 20:38:17

目录

背景

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

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/6/26 20:21:28

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/8/27 2:56:26

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/8/22 3:17:18

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/7/6 20:05:42

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2025/8/22 5:07:56

Python 高效图像帧提取与视频编码：实战指南

Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...

编程新知 2025/8/31 18:02:53

云原生周刊：k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

编程新知 2025/8/4 12:28:02

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2025/8/23 13:35:12

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

编程新知 2025/7/6 9:37:11

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践&#xff0c;很多人以为AI已经强大到不需要程序员了&#xff0c;其实不是&#xff0c;AI更加需要程序员&#xff0c;普通人…...

编程新知 2025/8/29 6:58:17