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

开始之前先说说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(自定义属性名)
//现在全局定义
:root{
   --theme-color:red;
}

//使用的时候
#app{
    background-color:var(--theme-color);
}

//假如我们没有指定--theme-color这个属性,则可以在使用的时候加上替代值
#app{
    background-color:var(--theme-color,black);//没有指定--theme-color则会由black代替
}
  1. 通过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自定义属性实现换肤功能
    


    

    

你可能感兴趣的:(使用CSS3自定义属性实现换肤功能)