前情

最近在做需求开发，要求根据后台传来的配置对网页换肤，按以往的换肤思路应该是写好几套样式做切换达到换肤效果，但是现在想做到能根据后台配置动态修改。

原理

通过css3新增变量特性，把颜色定义为变量再全局使用，在想更改颜色的时候，我们只要修改对应变量对应的颜色就能全局换肤，主要原理演示代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <style type="text/css">

		:root {

      --main-bg-color: red;

    }

    .test{

      width: 500px;

      height: 100px;

      background-color: green;

      background-color: var(--main-bg-color);

    }

  </style>

</head>

<body>

  <div class="test"></div>

</body>

</html>

演示地址：https://jsbin.com/lozizajuva/edit?html,output

换肤实战

  1. 通过颜色配置表生成一个包含所有css变量的style插入到head中
  2. 所有css中需要进行颜色替换的都通过css变量来设置
  3. 动态更换主题的话只要替换上面生成style里的内容即可

演示代码

html结构

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <style>

    body{

      --test-var: 'green';

    }

    .test{

      width: 500px;

      height: 100px;

      /* 低版本不兼容的浏览器也有个默认颜色 */

      background-color: blue;

      background-color: var(--main-color)

    }

    .test_in{

      width: 100px;

      height: 50px;

      line-height: 50px;

      font-size: 14px;

      background-color: #dddddd;

      /* 低版本不兼容的浏览器也有个默认颜色 */

      color: blue;

      color: var(--main-color);

    }

  </style>

</head>

<body>

  <div class="test">

    <div class="test_in">css var换肤</div>

  </div>

  <select id="themeSelect">

    <option value ="deault">默认</option>

    <option value ="red">红色</option>

    <option value="green">绿色</option>

</select>

</body>

</html>

javascript

// 颜色配置表，测试数据，正常是从服务端过来的

const THEME_CONFIG = {

  "default": {

    "--main-color": "blue"

  },

  "red": {

    "--main-color": "red"

  },

  "green": {

    "--main-color": "green"

  }

}

// 存储当前用的是什么色系

let currentConfig = THEME_CONFIG['default'];

// 备份styles

let stylesBackups = null;

/**

 * 生成主题代码段

 * @param {Object} config

 * @returns

 */

function createThemeStyle(config) {

  let result = `

  :root {

    --main-color: ${config['--main-color']};

  }`

  return result;

}

/**

 * 插入主题style段

 * @param {String} styleString

 */

function insertThemeStyle(styleString) {

  let styleTag = document.querySelector('#themeStyleTag');

  if (!styleTag) {

    styleTag = document.createElement('style');

    styleTag.id = 'themeStyleTag';

    styleTag.setAttribute('type', 'text/css');

    document.getElementsByTagName('head')[0].insertBefore(styleTag, document.getElementsByTagName('style')[0]);

  }

  styleTag.innerHTML = styleString;

}

/**

 * 判断css变量是否被支持

 */

function cssVarIsSupport() {

  var testVar = getComputedStyle(document.body).getPropertyValue("--test-var");

  return testVar ? true : false;

}

/**

 * 解决兼容，根据主题配置生成正则

 * @returns string

 */

function createStyleRegex() {

  let regexStr = '';

  let varList = Object.keys(currentConfig);

  for(let i=0,len=varList.length; i<len; i++) {

    regexStr += `var\\(${varList[i]}\\)${i<len-1 ? '|' : ''}`;

  };

  return regexStr;

}

/**

 * css变量兼容处理-第一次

 */

function compatibleProcessingCssVar() {

  let styles = document.getElementsByTagName('head')[0].getElementsByTagName('style');

  stylesBackups = {};

  // 生成正则匹配规则字符串

  let regexStr = createStyleRegex();

  // 遍历所有style标签替换

  for(let i=1,len=styles.length; i<len; i++) {

    let item = styles[i];

    let replaceReg = new RegExp(regexStr, 'g');

    let styleStr = item.innerHTML;

    if (!replaceReg.test(styleStr)) {

      continue;

    }

    if (!stylesBackups['theme'+i]) {

      item.setAttribute('id', 'theme'+i);

      stylesBackups['theme'+i] = styleStr;

    }

    styleStr = styleStr.replace(replaceReg, function(mactchStr) {

      return currentConfig[mactchStr.split(/\(|\)/)[1]];

    });

    item.innerHTML = styleStr;

  }

}

/**

 * 解决兼容浏览器的动态换肤问题

 * css变量兼容处理-后面不需再去获取所有style，通过从内存中拿缓存的style来做字符串替换

 */

 function compatibleProcessingCssVarFromCache() {

  // 生成正则匹配规则字符串

  let regexStr = createStyleRegex();

  let styleKeys = Object.keys(stylesBackups);

  // 遍历所有style标签替换

  for(let i=1,len=styleKeys.length; i<len; i++) {

    let key = styleKeys[i];

    let styleStr = stylesBackups[key];

    let replaceReg = new RegExp(regexStr, 'g');

    styleStr = styleStr.replace(replaceReg, function(mactchStr) {

      return currentConfig[mactchStr.split(/\(|\)/)[1]];

    });

    document.getElementById(key).innerHTML = styleStr;

  }

}

/**

 * 适配主题

 * @param {string} theme

 */

function adaptationTheme(theme) {

  // 获取颜色列表

  currentConfig = THEME_CONFIG[theme];

  // 对于兼容css var的浏览器

  if (cssVarIsSupport()) {

    // 生成style

    let styleString = createThemeStyle(currentConfig);

    // 插入style中

    insertThemeStyle(styleString)

  } else {

    // 对于不兼容css var的浏览器（chrome49、ie15以下）

    if (stylesBackups) {

      compatibleProcessingCssVarFromCache();

      return;

    }

    compatibleProcessingCssVar();

  }

}

window.onload = function(){

  adaptationTheme('default');

  // 动态更换主题

  document.querySelector('#themeSelect').addEventListener('change', function() {

    adaptationTheme(this.value)

  }, false)

}

注意事项：

如果想兼容低版本浏览器则需要所有样式通过style写入，因为在做兼容处理的时候，是通过js代码替换掉style标签里的css变量来做兼容处理的，上面代码有做低版本兼容，对于不需要兼容低版本浏览器的，上面代码可以删减掉兼容代码。

演示地址：https://jsbin.com/tetuguxifi/1/edit?html,js,output

css var实现网页换肤的更多相关文章

  1. js网页换肤

    使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="ge ...

  2. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  3. JavaScript网页换肤

    使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head ...

  4. 【转】Javascript+css 实现网页换肤功能

    来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...

  5. 基于js的网页换肤（不需要刷新整个页面，只需替换css文件）

    1. [代码][JS]代码    <HTML><HEAD><link ID="skin" rel="stylesheet" typ ...

  6. 网页换肤,模块换肤,jQuery的Cookie插件使用（转）

    具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: & ...

  7. jquery网页换肤+jquery的cookie+动态调用css样式文件,可以的

    比较具有参考性,代码全贴(当然,还需要一张图片需要的留个邮箱,看到就发) 贴在这儿吧,修改一下css的引用位置应该可以用 <%@ page language="java" c ...

  8. css, js 项目练习之网页换肤

    首先,该练习参考自:https://www.jianshu.com/p/2961d9c317a3 我就直接上代码了(颜色可以自己调). HTML: <nav> <li>< ...

  9. 网上找到的一个jquery版网页换肤特效

    这个跟我之前在锋利的JQuery那本书里看到的那个一模一样. <!DOCTYPE html> <html> <head> <meta name="& ...

  10. 网页换肤：原生js与jq

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 这些年没来得及学习的一些 HTML5 标签

    认识并学习下还没来得及学习的一些 HTML5 标签 <ruby> 标签 HTML <ruby> 元素被用来展示东亚文字注音或字符注释. 比如: <ruby>兄弟&l ...

  2. 【赵渝强老师】Kubernetes平台中日志收集方案

    一.K8s整体日志收集方案 整体的日志收集方案,如下图所示: Filebeat是本地文件的日志数据采集器,可监控日志目录或特定日志文件(tail file),并将它们转发给Elasticsearch或 ...

  3. excel导出功能的实现流程说⼀下？

    导出的话,我们因为到处的数据量不⼤,所以直接采取的时候前端主导的⽅案,参考的现成⽅案实现的 导出 ⼤概得流程就是 1. 调⽤后端接⼝得到要导出的数据 2. 把数据简单处理⼀下转化成导出插件需要的格式 ...

  4. Kubernetes CNI 插件选型和应用场景探讨

    作者:马伟,青云科技容器顾问,云原生爱好者,目前专注于云原生技术,云原生领域技术栈涉及 Kubernetes.KubeSphere.KubeKey 等. 本文介绍容器环境常见网络应用场景及对应场景的 ...

  5. thinkphp5 模型批量增加数据小记

    楼主最近在学习thinkphp5,真的没应广大使用教程所说:你最好就是没学过thinkphp3.2.要不然苦恼重重. 因为想将一些功能实现一次,故自己写了一个文件上传类. 可以实现单文件,多文件上传( ...

  6. 认识JVM

    类加载器 运行时数据区 执行引擎 执行引擎的任务就是将字节码指令解释/编译为对应平台上的本地机器指令 JVM架构图

  7. KubeSphere 最佳实战：Kubernetes 部署集群模式 Nacos 实战指南

    Nacos 是 Dynamic Naming and Configuration Service 的首字母简称,一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台. Nacos 是构建以服 ...

  8. 想玩Steam游戏，但配置太低？ToDesk云电脑一招搞定！

    在游戏爱好者的世界里,汇集了许多游戏大作的Steam平台无疑是一座宝库.但对于许多玩家来说,拥有一颗渴望畅玩游戏的心,却常常被低配置的电脑设备所束缚.尤其是面对硬件要求极高的3A大作时,低配置的电脑往 ...

  9. 使用VMware Workstation创建的虚拟机无法连接网络解决方法

    引言:最近打开虚拟机老是连接不上网络,在网上找这前两个方法试还是一直不行,最后才知道忘记重启DHCP service和NAT service 1.查看虚拟机的设置,确保虚拟机网络连接的方式勾选的是NA ...

  10. npm安装html2canvas依赖报错 npm ERR! Unexpected token < in JSON at position 0 while parsing near '<!DOCTYPE html> npm ERR! <htm...'

    今天安装某个依赖时发现npm ERR! 可我是正常操作啊,也没有升级啥的,咋就安装不了了? npm install --save html2canvas 报错信息如下: npm ERR! Unexpe ...