专栏首页coding个人笔记在线动态换肤思路

在线动态换肤思路

很早之前就在想在线换肤的实现思路,主要是之前有个项目有换肤,连布局图片都不一样,无能为力,只好写不同页面,然后通过打包的时候配置删除和替代文件实现,但是在线换肤还是没去做。今天分享一下换肤的思路,只是单纯的颜色替换,没有包括连布局图片都不一样的换肤。

跟国际化一样,方案可能不难,难的是开发业务的时候很繁琐,写的不好就很难维护。最简单的一个方式,通过不同的css实现换肤,前提是确定好几个可供切换的css,效果:

代码很简单主要就是动态切换link引入的地址:

let link = document.getElementById('color');

link.setAttribute('href', type + '.css');

这种方法其实并不是很建议,一个是你必须提供很多css文件,另外一个就是你很难直接通过设置css的十六进制去换肤,方法也有,比如把十六进制传递给后台让后台生成一份文件之类的,总的来说比较low一点,如果只是固定几个皮肤这样的反而更简单。

另外一种是类似element-ui做的换肤,把颜色的样式都写在head头部的style标签里面,可以去看一下,当你换颜色的时候,style标签id为docs-style和chalk-style里面的颜色就会被替换。可以去看看:

https://element.eleme.cn/#/zh-CN/theme/preview

自己简单做了个效果,效果跟上面是一样的,代码:

<style id="colorId">

.bg{

background: #00aaee;

}

.text{

color: #00aaee;

}

</style>

<li><button class="bg" onclick="changeColor('00aaee')">a皮肤</button></li>

<li><button class="bg" onclick="changeColor('00ee57')">b皮肤</button></li>

<li><button class="bg" onclick="changeColor('ee0043')">c皮肤</button></li>

let currentColor = '00aaee';

function changeColor(color) {

let reg = new RegExp(currentColor,'g');

let sty = document.getElementById('colorId');

let str = sty.innerHTML;

str = str.replace(reg, color);

sty.innerHTML = str;

currentColor = color;

}

我这边只是提供个思路,真正要实现起来当然要复杂一些,颜色肯定不止一个,element是颜色对应一个关键字的数组,然后把style里面的颜色都先替换成关键字,然后再根据颜色生成对应的数组,接着把关键字替换回颜色,最后写入style标签。

还有一种css自定义变量的方式,这我还真是前几天才知道的,是一个大佬告知的,这个css很早就出现了,只是一直不知道:

:root {

--bg: #00aaee;

--color: #00aaee;

}

.bg{

background: var(--bg);

}

.text{

color: var(--color);

}

function changeColor(color) {

document.body.style.setProperty('--bg', '#' + color);

document.body.style.setProperty('--color', '#' + color);

}

很简单,查一下css自定义变量就知道怎么使用了。本来觉得这个自定义变量是真没什么意义,发现 这样一用,反而觉得换肤功能会简单很多。

另外一种antd利用 Less 的变量以及在浏览器编译没有去实验一下,本地连antd的官网都打不开。还有之前有提到过的css in js在这种换肤场景下好像也非常的合适。

自己知道的在线换肤的思路只有这三种了,如果真的有需求要做在线换肤功能,还真不知道哪种会比较好,只能是自己选型了,真正涉及项目的时候,可不只是这样说说而已,会碰见什么坑就不好说了。讲道理,现在应该没多少在线换肤的功能网站了吧。

自己感觉还是有点不对劲,希望有做过换肤项目的(不只是demo)可以指点一波。

(完)

Coding 个人笔记

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:coding个人笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css 隔离

    css一旦生效,就会应用于全局,所以很容易出现冲突。css隔离就是为了解决这个问题。可以使用的方法大概就几个:

    wade
  • ES6之字符串扩展

    ES6对字符串扩展了一些功能,开发过程用到的不多,还有一些是Unicode的,这边就不仔细说那些,简单提一下ES6对字符串扩展了哪些。

    wade
  • ES6之module语法

    之前分享过模块化,也提到了ES6新增的module。JavaScript一直没有模块体系,css都有@import。ES6标准实现了模块化功能,完全可以取代那些...

    wade
  • php学习之css小结1

    吾爱乐享
  • CSS3的transition动画功能

    xing.org1^
  • webpack打包原理入门探究(四)插件探究(上)

    效果如下,在 dist 目录生成 index.html,同事也引入了 a.js, main.js

    公众号---人生代码
  • 这些领域,将是科技未来的发展方向

    巨头激烈争夺的地方,就是科技未来的发展方向。 自2009年以来,微软在网络安全方面的专利申请量已经遥遥领先,拥有超过900多项专利。 在中国,网络安全被重视。工...

    企鹅号小编
  • Diffbot启动了基于AI的知识图谱:包含1万亿个有关人类、地点和事物的事实

    如果你曾经在谷歌搜索名人,著名地标或之前的产品,那么你可能会遇到有时位于结果页右侧的信息框,充满了谷歌知识图谱的信息,这是一个实体数据库,用于增强网络和Goog...

    AiTechYun
  • 人工智能帮助打击盗猎者

    盗猎者每天大约会杀害96头非洲大象。而生态环保人士发出警告,认为如果不扭转局势,这种标志性的动物可能在未来几十年就惨遭灭绝。但现在,科学家希望通过一种新的人工智...

    人工智能快报
  • .NET Transactional File Manager

    http://transactionalfilemgr.codeplex.com/

    跟着阿笨一起玩NET

扫码关注云+社区

领取腾讯云代金券