前端换肤方案

最新推荐文章于 2024-08-18 18:35:31 发布

原创

最新推荐文章于 2024-08-18 18:35:31 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了五种前端换肤方案：1) 利用class命名空间，2) 准备多套CSS主题，3) CSS预处理生成主题样式，4) 动态换肤，5) CSS变量换肤。每种方案详细阐述了优缺点及参考实现。动态换肤和CSS变量换肤因效率和兼容性成为推荐选择。

主题换肤 cookie中存储theme值

序号	方法	特点
1	利用class 命名空间	最简单的换肤方案，适用局部小范围的主题换肤
2	准备多套CSS主题	传统前端最常用。根据层叠性特性，使原有样式生效两种办法 1.预制样式 link 控制值disable 2.动态追加 link标签覆盖
3	利用CSS预处理生成多套主题样式	现代前端最常用
4	动态换肤	支持浏览器热换肤，最酷炫
5	CSS变量换肤	不考虑IE，最佳换肤方式

这是五种均为通用方案，可以适用于各种前端框架，脚手架中

1. 利用class 命名空间

这是最简单的换肤方式，看下面示例即可轻松理解。

1.利用class 名称准备两个主题：


<style>

  p.red-theme {

    color: red

  ｝

  p.blue-theme {

    color: blue

  ｝
</style>

2.如果用红色主题，给body增加 red-theme标签


<body class="red-theme">

    <p> 这里是红色主题 </p>

     ...

</body>

3.如果用蓝色主题，用 blue-theme 代替 red-theme


<body class="blue-theme">

    <p> 这里是蓝色主题 </p>

     ...

</body>

优缺点

优点：简单，好理解，好实现
缺点： CSS中需多写主题的class，代码容易混乱；需手动编写

参考

基于element动态换肤

2.准备多套CSS主题

本地存放多套主题，根据需要切换加载不同的样式

准备份默认样式主题

/*theme-default.css*/
p {
  color: #333
}
...

准备各主题的样式

/* theme-red.css */
p {
  color: #red
}
...

/* theme-blue.css */
p {
  color: #blue
}
...

页面加载后，根据用户需求加载不同的样式列表

   var link = document.createElement('link');
   link.type = 'text/css';
   link.id = "theme-blue";  
   link.rel = 'stylesheet';
   link.href = '/css/theme-blue.css';
   document.getElementsByTagName("head")[0].appendChild(link);