css 变量 实现页面换肤

开始之前先说说css3的自定义属性，之前我们在写css的时候全部都是使用自身属性，比如margin,padding等。但是你曾是否见过这样的css

:root{
    --primary-color:#989898;
    --light:#fff;
    --dark:#000;
}

其中的–primary-color、–light、–dark就是自定义的属性。

1. 自定义属性的命名规则

--variables-name:variables-value
--属性名:属性值
例如定义一个主题颜色：
--theme-color:red;

1. 作用域

//:root作用于全局
:root{
    --theme-color:red;
}
//#app作用于id为app的节点内
#app{
    --theme-color:red;
}

1. 使用方法 var(自定义属性名)
2. 通过JS获取和设置自定义的属性

//js中获取--theme-color的值
var styles = getComputedStyle(document.documentElement);
var value = styles.getPropertyValue("--theme-color");
console.log(value);//red

//js中更改--theme-color的值
document.documentElement.style.setProperty("--theme-color","black");

明白了这几个概念我们开始实现我们的换肤功能：

    
    
    


    

        
CSS3自定义属性实现换肤功能Demo
  
    

    

        red
        black
        blue
    

    

--------------------- 本文来自 花开花又谢 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/u010730897/article/details/81116958?utm_source=copy

主要使用到  :root  伪类 和 -- css 变量, 浏览器兼容情况要考虑

想要更详细了解的, 可以点这里张鑫旭大神的博文:

https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/