前情

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

原理

通过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. SQL Server Aggregate Functions

    SUM 如果 row count = 0 返回的是 NULL 而不是 0 哦, 如果要 0 可以使用 ISNULL 来处理 如果其中一些 row 是 NULL, 那无所谓, 它只会 SUM 数字出来 ...

  2. 阿里邮箱网页正常登陆，outlook报错

    事件起因: 某客户使用阿里邮箱办公,然又使用outlook绑定阿里邮箱:在网页端可以登录阿里邮箱,但是在outlook的登录的时候,服务器.端口均设置无误,但是就是登录不上去,死活都等登录不上去,总是 ...

  3. uniapp中前端canvas合成图片使用详解

    项目开发中用到了定位打卡,保存当前位置到上传图片的功能.刚开始想着后端人员合成,前端上传经纬度.位置信息和图片就OK,没想到后端人员以使用项目中现有的组件为借口,让前端合成图片,造成前端工作量大增,再 ...

  4. 前端面试题axaios携带 cookies

    配置 axios.default.widthCredentials = true;

  5. 使用nacos上传配置文件报错

    1.使用nacos导入配置文件报错:未读取到合法数据,请检查导入的数据文件. 对比在naocs server中导出的文件,发现是少了一级目录.需要创建一个文件夹,名称为组的名称.因为在nacos上传文 ...

  6. for-each循环陷阱

    for-each删除元素报错 public static void main(String[] args) { List<String> list = new ArrayList<& ...

  7. 人口分析实战（利用jupyter）

    目录 1.项目需求 2.开始操作 2.1导入我们所需要的包 2.2导入数据.查看原始数据 2.3对数据进行清洗 2.4对数据进行处理 1.项目需求 需求: 导入文件,查看原始数据 将人口数据和各州简称 ...

  8. 今日一学，5道Java基础面试题（附Java面试题及答案整理）

    前言 马上国庆了,本来想着给自己放松一下,刷刷博客,慕然回首,自动拆装箱?equals?==?HashCode? instanceof? 似乎有点模糊了,那就大概看一下5道Java基础面试题吧.好记性 ...

  9. 干货分享：开启PWM调光之门，一起来做呼吸灯

    PWM作为一种灵活且高效的信号调制手段,在电气设备的性能控制和调节中发挥着重要作用,常用于电机控制.灯光调光.音频信号生成.加热控制等应用. 本文将以合宙低功耗4G模组经典型号--Air780E为例, ...

  10. 一文讲透 FPGA CDC 多bit跨时钟域同步-hand-shanking机制

    一.背景 数据的跨时钟域处理是FPGA开发过程中的常见问题,存在两种情况 慢时钟向快时钟同步:只需在快时钟域打两拍即可.其RTL如下: 打拍同步的原理:大家在初学FPGA时,经常听过FPGA中对信号打 ...