css 实现换肤几种方式
说起换肤功能，前端肯定不陌生，其实就是颜色值的更换，实现方式有很多，也各有优缺点
一、可供选择的换肤
对于只提供几种主题方案,让用户来选择的,一般就简单粗暴的写多套主题
- 一个全局class控制样式切换,直接更改全局class
<body class='dark'></body>
- 使用js去修改 link 的 href
<link id='link_theme' href="skin.css" rel="stylesheet" type="text/css"/>
<script>
document.getElementById('link_theme').href='skin-dark.css'
</script>
二、动态色值换肤的实现
- 全局替换颜色值
可以参看 Element-UI 的换肤实现,就是先把样式中颜色全部替换后在塞到<style>标签里面
- 使用 less 的 modifyVars 动态修改
modifyVars方法是是基于 less 在浏览器中的编译来实现。所以在引入less文件的时候需要通过link方式引入，然后基于less.js中的方法来进行修改变量
// styles.less
@color: red;
.card {
color: @color;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdn.jsdelivr.net/npm/less"></script>
</head>
<body>
<div class="card">
card
</div>
<button id="themeBtn">更改颜色</button>
</body>
<script>
document.getElementById("themeBtn").addEventListener('click', function () {
let color = '#' + Math.floor(Math.random() * 256 * 1000000000).toString(16).slice(0, 6)
less.modifyVars({
'@color': color
}).then(() => {
console.log(`color: ${color}F`);
});
})
</script>
- css 变量(var)
css 原生变量 兼容性,大部分主流浏览器还是支持的，而且主要是操作起来够简便。
定义变量
// 加上前缀 -- 就可以了
:root{
--color:red;
}
//使用 当--color 不生效的时候会使用后面参数替代
body:{
color:var(--color,#000)
}
使用 js 去修改
// 获取根
let root = document.documentElement;
root.style.setProperty('--color', '#f00');
三、总结
如果需要动态替换颜色主题,使用第二种比较合适也方便.如果每套主题有很大差异性不仅仅只是颜色的替换,第一种的方式就好了很多,使用第二种就不太合适了.如果都需要满足也可以两种相结合使用
css 实现换肤几种方式的更多相关文章
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- css清除浮动的两种方式（clearfix和clear）
最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...
- css清除浮动的几种方式，哪种最合适？
细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...
- CSS颜色表示的几种方式
在CSS中颜色有很多表示方式,今天列出一些常见的颜色表示方式及它们的用法. ①color:blue; 第一种,调用颜色属性,将颜色的英文输入在冒号后,以分号结束. 这种方法直接了当,但是能表示的颜色 ...
- HTML/css清除浮动的几种方式
浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...
- 关于css垂直水平居中的几种方式
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...
- 实现CSS等分布局的4种方式
× 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...
- CSS清除浮动的几种方式
浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...
- css清除浮动的3种方式
前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...
随机推荐
- SpringBoot+Activiti+bpmn.js+Vue.js+Elementui(OA系统审批流)
引言:OA系统用到请假.加班.调休.离职,需要使用工作流进行流程审批 一:activiti流程设计器的选择(通过学习activiti工作流过程中,发现一款好的流程设计器将会更好的方便的设计好流程(主要 ...
- 华为方舟编译器正式支持C语言：完全开源
投递人 itwriter 发布于 2020-10-14 19:08 评论(15) 有1938人阅读 原文链接 2019 年 8 月底,华为方舟编译器(OpenArkCompiler)正式开源,迈出了跨 ...
- MeteoInfoLab脚本示例：读取文本文件绘制散度图
MeteoInfoLab中读取文本文件数据的函数是asciiread,获取文本文件行.列数的函数是numasciirow和numasciicol,和NCL中函数名一致,但都是小写字母.本例中的示例数据 ...
- selenium环境配置学习笔记
一 为什么进行自动化测试 缩短测试周期 避免人为出错 测试信息存储 轻易获取覆盖率 二 web/ui自动化条件和适用范围 手工测试已经完成,后期在不影响进度的前提下逐渐实现自动化 项目周期长,重复性工 ...
- 【CodeForces】835F Roads in the Kingdom
一.题目 题目描述 王国有\(n\)座城市与\(n\)条有长度的街道,保证所有城市直接或间接联通,我们定义王国的直径为所有点对最短距离中的最大值,现因财政危机需拆除一条道路并同时要求所有城市仍然联通, ...
- canal 整合RabbitMQ
环境如下: canal: 1.15-alpha-1 mysql 5.6.49 rabbitmq 3.7.14 Erlang 21.3 canal 安装和启动 见上篇文章 canal快速安装启动 但是 ...
- sql中的Bulk 导入txt文本
通常,我们会对于一个文本文件数据导入到数据库中,不多说,上代码. 首先,表结构如下. 其次,在我当前D盘中有个文本文件名为2.txt的文件. 在数据库中,可以这样通过一句代码插入. Bulk in ...
- 如何快速在vscode配置C/C++环境
目录 1.卸载重装vscode 2.下载vscode 3.下载MinGW 4.配置环境变量 5.配置c/c++环境 6.超完整的配置文件 7.常用扩展推荐 8.注意 9.后记 相信许多刚开始使用vsc ...
- vue知识点11
1. Vue.js 是什么 Vue是一套用于构建用户界面的渐进式框架 2. vue的环境搭建(Vue2 ) 3. 经典的hello world new Vue({ ...
- java刷题时常用容器详解
当初学java时,只是简单的把java基础知识过了一遍就跑去刷题了,很多知识都是在刷题的过程中慢慢加深理解的. 由于每次刷题时,刷到与容器有关的我基本上都跑去百度了,例如百度一下:java中List的 ...