动态修改css中:root定义的变量-换肤、主题色

html-css090

动态修改css中:root定义的变量-换肤、主题色,第1张

前端中有用到需要设置主题颜色，根据用户喜欢实现换肤的可以使用css中:root定义变量的方式，或者使用动态切换引入的外部css样式表实现，这里着重记录下动态修改css中:root定义的变量实现换肤：

这里定义变量必须是以'--'开头，然后其他页面的样式表就可以直接引用这个变量了

至此就完成了动态修改:root变量实现换肤了，具体的应用场景中我们应该是在页面上操作，选中需要的肤色然后修改:root定义的变量值，考虑到浏览器刷新会重置原始状态的值，这里要结合本地存储方式记住选中的肤色，具体的实现参考：

:root伪类代表根元素，在设置样式的时候，等同于html选择器。

但是它有比html更多的权限，比如在内部自定义属性创建全局级别的变量，如下：

：root{

margin:0

padding:0

--primary-color:#666666

}

h1{

color:var(--primary-color)

}

CSS变量定义通过在变量名前加 var- 前缀实现，引用时使用 var() 获取变量值。例如：

:root {

var-companyblue: #369

var-lighterblue: powderblue

}

h1 {

color: var(companyblue)

}

h2 {

color: var(lighterblue)

}