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

目录

背景

(强烈推荐)实现方法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 属性实现动态修改样式(暂不推荐这种方案)

优点:实现了按需加载,提高了性能;

缺点:动态加载样式文件,可能会因为网络问题导致样式加载过慢;

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

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

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

相关文章

动态库与静态库 动态链接与静态链接

1.动态库&#xff1a;库文件&#xff0c;以.so为后缀(Windows中为.dll) 静态库&#xff1a;库文件&#xff0c;以.a为后缀(Windows中为.lib) 库的命名规则&#xff1a;lib库名.后缀 见到一个库&#xff0c;掐头去尾才是它的库名。使用gcc进行编译的时候&#xff0c;默认是采用的…

Makefile编译原理 make 中的路径搜索_1

一.make中的路径搜索 问题&#xff1a;在实际的工程项目中&#xff0c;所有的源文件和头文件都放在同一个文件夹中吗&#xff1f; 实验1 &#xff1a; VPATH 引子 mhrubuntu:~/work/makefile1/17$ ll total 28 drwxrwxr-x 4 mhr mhr 4096 Apr 22 00:46 ./ drwxrwxr-x 7 mhr m…

假期2.7

一、填空题 1、在下列程序的空格处填上适当的字句&#xff0c;使输出为&#xff1a;0&#xff0c;2&#xff0c;10。 #include <iostream> #include <math.h> class Magic {double x; public: Magic(double d0.00):x(fabs(d)) {} Magic operator(_ _const…

离开亚马逊7.5年后的真心话

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【开源】SpringBoot框架开发厦门旅游电子商务预订系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 景点类型模块2.2 景点档案模块2.3 酒店管理模块2.4 美食管理模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 学生表3.2.2 学生表3.2.3 学生表3.2.4 学生表 四、系统展示五、核心代码5.1 新增景点类型5.2 查询推荐的…

金和OA C6 RssModulesHttp.aspx SQL注入漏洞复现

0x01 产品简介 金和网络是专业信息化服务商,为城市监管部门提供了互联网+监管解决方案,为企事业单位提供组织协同OA系统开发平台,电子政务一体化平台,智慧电商平台等服务。 0x02 漏洞概述 金和OA C6 RssModulesHttp.aspx接口处存在SQL注入漏洞,攻击者除了可以利用 SQL 注入…

算法学习——LeetCode力扣二叉树篇3

算法学习——LeetCode力扣二叉树篇3 116. 填充每个节点的下一个右侧节点指针 116. 填充每个节点的下一个右侧节点指针 - 力扣&#xff08;LeetCode&#xff09; 描述 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树…

「C++ 类和对象篇 11」explicit关键字

目录 〇、构造函数还具有类型转换的作用 一、explicit关键字是什么&#xff1f; 二、为什么需要explicit关键字&#xff1f; 三、怎么使用explicit关键字&#xff1f; 【总结】 〇、构造函数还具有类型转换的作用 构造函数不仅可以构造与初始化对象&#xff0c;对于只有一个参…

ChatGpt报错:Your authentication token is no longer valid解决办法

今天打开ChatGpt突然提示Oops&#xff01;,Your authentication token is no longer valid.&#xff0c;之前还好好的&#xff0c;环境也没变啊&#xff0c;结果弄了好久终于解决&#xff0c;于是记录一下解决过程&#xff0c;顺便总结一下关于OpenAI各种报错的解决办法。 完整…

Python编程-二万字浅谈装饰器原理与装饰器设计模式和函数式编程案例讲解

Python编程-浅析装饰器原理与装饰器设计模式和函数式编程案例讲解 本文制作时基于Python3.11.8与Python3.12.1&#xff0c;存在谬误&#xff0c;请联系修改&#xff0c;希望对你有所帮助 什么是函数式编程 函数式编程&#xff08;Functional Programming&#xff09;是一种编程…

【linux温故】linux调度机制

假如你是设计者&#xff0c;你会设计怎样的调度机制呢&#xff1f; 时间片 最简单的&#xff0c;小学生都能想出来的一种&#xff0c;每个 ready task&#xff0c;按照一个固定的时间片轮流执行。 大家不要抢&#xff0c;挨个儿排队执行。执行完时间片&#xff0c;就排在后面…

Linux发行版全景:选择、使用和未来趋势

1. 引言 Linux操作系统的简介 Linux是一种自由和开源的操作系统内核&#xff0c;由Linus Torvalds在1991年首次发布。随着时间的发展&#xff0c;Linux已经成为世界上最流行的操作系统之一&#xff0c;广泛用于服务器、桌面电脑、移动设备以及嵌入式系统。Linux的主要特点是其…

漫漫数学之旅017

文章目录 经典格言数学习题古今评注名人小传&#xff08;一&#xff09;亚当斯密&#xff08;二&#xff09;J理查德高特三世 经典格言 科学是热情与迷信之毒的最佳解毒剂。——亚当斯密&#xff08;Adam Smith&#xff09; 咳咳&#xff0c;各位看官&#xff0c;且听我用轻松…

POC集合,框架nday漏洞利用

综合 主流供应商的一些攻击性漏洞汇总 2021_Hvv漏洞 2022年Java应用程序的CVE漏洞 漏洞库合集 公开的信息、漏洞利用、脚本 Goby POC nuclei-templates LiqunKit_ 强化fscan的漏扫POC库 在渗透测试中快速检测常见中间件、组件的高危漏洞。 OAExploit一款基于产品的一…

【HTTP】localhost和127.0.0.1的区别是什么?

目录 localhost是什么呢&#xff1f; 从域名到程序 localhost和127.0.0.1的区别是什么&#xff1f; 域名的等级划分 多网站共用一个IP和端口 私有IP地址 IPv6 今天在网上逛的时候看到一个问题&#xff0c;没想到大家讨论的很热烈&#xff0c;就是标题中这个&#xff1a; …

吹响AI PC号角!微软在Windows中不断增加“Copilot含量”

2024&#xff0c;会是AI PC元年吗&#xff1f;至少微软正在往这个方向努力。 本周&#xff0c;微软开始在Windows中测试Copilot的“新体验”&#xff0c;其中包括任务栏中的Copilot图标&#xff0c;当用户复制文本或图片时&#xff0c;Copilot操作菜单就会自动出现。 有媒体在…

C#面:什么是Code-Behind技术

Code-Behind技术是一种在Web开发中常用的技术&#xff0c;它将前端页面与后端代码分离&#xff0c;使得前端页面的设计和后端代码的逻辑处理可以分别进行。在Code-Behind模式下&#xff0c;前端页面通常是一个标记语言&#xff08;如HTML或ASPX&#xff09;&#xff0c;而后端代…

Zotero常用插件分享

Zotero有着强大的文献管理功能&#xff0c;之前也对其进行过简要介绍&#xff08;Zotero——一款文献管理工具&#xff09;&#xff0c;而安装一些必要的插件则可以使其如虎添翼&#xff0c;今天一起来探索一下一些实用的插件吧&#xff01;&#xff08;排名不分先后&#xff0…

肯尼斯·里科《C和指针》第12章 使用结构和指针(2)双链表

12.3 双链表 单链表的替代方案就是双链表。在一个双链表中&#xff0c;每个节点都包含两个指针——指向前一个节点的指针和指向后一个节点的指针。这可以使我们以任何方向遍历双链表&#xff0c;甚至可以随意在双链表中访问。下面的图展示了一个双链表。 下面是节点类型的声明&…

java设计模式- 建造者模式

一 需求以及实现方式 1.1 需求描述 我们要创建一个表示汽车的复杂对象&#xff0c;汽车包含发动机、轮胎和座椅等部分。用传统方式创建&#xff0c;代码如下 1.2 传统实现方式 1.抽象类 public abstract class BuildCarAbstaract {//引擎public abstract void buildEng…