一键换肤 自定义css样式实现

已于 2022-11-14 09:33:18 修改
阅读量934 收藏 1
点赞数
分类专栏： css 文章标签： css javascript css3
于 2020-05-08 14:55:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35675325/article/details/105996177
版权

在项目中有很多时候都有一键换肤的需求。刚好接了这样的一个需求，就把过程记录下来。
我用了自定义css来实现。
在这里插入图片描述
创建皮肤样式文件
定义css样式名称
在这里插入图片描述
样式名称必须是以 – 开头
文件内引用皮肤样式
在这里插入图片描述
设置根节点
在这里插入图片描述
使用setProperty()方法让自己定义的样式名称与样式做一个映射
在这里插入图片描述
此时 样式名称的定义 与样式已经完成
注：为了项目更好的维护，建议把样式名称跟样式单独放在一个文件内，使用的时候引入即可。

然后在使用的时候通过var()方法使用即可
在这里插入图片描述
换肤的时候我们只需要让样式名称对应不同的样式即可
在这里插入图片描述
自己随便写了个例子供参考，ok 大功告成 !

夜偷吻者梦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS换肤
03-21
NULL 博文链接：https://q445862108.iteye.com/blog/970853
js+css实现换肤功能
05-25
js+css实现换肤功能 js+css实现换肤功能 js+css实现换肤功能 js+css实现换肤功能
两种最简单的方式教会你如何实现前端一件换肤！
最新发布
qq_44647871的博客
03-26 1446
今天我教大家用两种最简单的方式实现前端一键换肤的功能，都是给予原生 css 和 js 的方法属性，不用安装任何的第三方库。听我娓娓道来
css动态一键换肤
Kf_loseHair的博客
07-02 517
思路： 设置变量 :root { --skin: red; } 引用变量 .border-color { border-color: var(--skin) !important; } 修改变量 document.documentElement.style.setProperty("--skin","yellow")
前端如何实现一键换肤
weixin_38468473的博客
01-22 510
在前端项目中，有很多项目都存在一键换肤的功能，有很多现存的UI框架也存在相同的功能，但其实他们实现换肤的本质其实都是一样的。都是在顶部的DOM节点中插入对应的class属性或者attribute属性，通过分别设置不同的属性值，然后在这些不同的属性值下设置不同的子节点样式，从而实现不一样的主题样式。而在换肤的时候只需要改变顶部的DOM节点中的这个属性值，就可以展示对应属性的主题样式。
css实现简单换肤
想好了再写！
08-03 330
效果图如下： 需求：点击对应小圆点，下面内容颜色跟着改变 主要思路： 1.在css中把对应的样式先写好； 2.获取小圆点给它绑定点击事件； 3.获取当前点击元素的类名； 4.将该类名设置给body； js主要考察的是获取属性值和设置属性值； <style> *{ margin:0; padding:0; list-style: none; } .dot{
jQuery实现网站换肤功能
08-02
换肤功能通常涉及到CSS（层叠样式表）的切换。每个“皮肤”实际上是一个或多个CSS文件，包含了不同的颜色、布局和图像等样式信息。当用户选择不同的皮肤时，页面会加载对应的CSS文件，从而改变页面外观。 在"jQuery...
炫彩界面库模块 2.0源码-易语言
06-12
炫彩界面库--软件界面开发框架, 简单易用,功能丰富(一千多个API接口), 小巧,高度DIY自定义,一键换肤, 满足不同软件UI需求,安全(所有界面元素无句柄),支持Windows平台所有编程语言,完善的帮助文档及技术支持服务; ...
易语言-炫彩界面库模块2.0完整开源/ 英文模块
06-25
炫彩界面库--软件界面开发框架, 简单易用,功能丰富(一千多个API接口), 小巧,高度DIY自定义,一键换肤, 满足不同软件UI需求,安全(所有界面元素无句柄),支持Windows平台所有编程语言,完善的帮助文档及技术支持服务; ...
炫彩界面库模块2.0完整开源/ 英文模块
05-29
炫彩界面库--软件界面开发框架, 简单易用,功能丰富(一千多个API接口), 小巧,高度DIY自定义,一键换肤,。满足不同软件UI需求,安全(所有界面元素无句柄),支持Windows平台所有编程语言,完善的帮助文档及技术支持服务;。...
js+css简单实现网页换肤效果
10-23
主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下
[CSS] 自定义变量带你随心所欲，一键换肤
weixin_34329187的博客
02-17 889
认识CSS自定义变量 CSS自定义属性？听着怎么那么神奇呢，属性还可以自定义，那不是可以放肆地玩耍？我自己定义的属性浏览器都能认识？ 一、基础 （一）名字和用途 其实CSS自定义属性还有很多小名，比如CSS变量、原生变量、CSS自定义属性级联变量，这些指的都是同个东西。 说到变量，在SCSS\LESS等CSS预处理器中大家都已经经常运用，说来有几点好处： 1、能使用颜色变量统一风格； 2、可以采...
纯css换肤
m0_61950846的博客
04-16 1103
css换肤，支持同时更改多种颜色
CSS换肤简单示例
挨踢笔记
11-06 2064
  CSS换肤简单示例 2007-11-06 20:24   阅读8   评论0 一、HTML页面： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题 1 id="cssfile" /> function
全网最详细官网一键换肤教程
laihaodong的博客
08-11 1786
vue一键换肤vue结合scss进行一键换肤
前端 “一键换肤“ 的 N 种方案
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-17 1237
前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群前言现在越来越多的网站都提供了拥有换肤（切换主题）功能，如 ElementUI[2]，既是为了迎合用户需求，或是为了凸显自己特...
前端实现一键换肤动态切换主题
to_prototy的博客
08-12 251
前端实现一键换肤动态切换主题
掌握 Vue3、Vite 和 SCSS 实现一键换肤的魔法步骤
CRMEB小程序商城的博客
03-06 997
一个网站的换肤效果算是一个比较常见的功能，尤其是在后台管理系统中，我们几乎都能看到他的身影，这里给大家提供一个实现思路。
css变量 实现页面换肤
逆风优雅的博客
04-08 650
css变量 实现页面换肤
静态网页一键换肤html css
05-12
实现静态网页一键换肤的方法主要是利用JavaScript动态修改CSS样式表中的样式，从而达到切换皮肤的效果。 下面给出一个简单的实现示例： HTML代码： ```html <!DOCTYPE html> 一键换肤示例 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值