5分钟通过css变量实现网站一键换肤的功能

关于CSS变量

CSS 自定义属性（即变量属性）,目前90%的浏览器都已经兼容这个属性了,具体看查询can i use的截图:

前端开发的一大利器，强大的变量属性引入到 CSS 当中,减少了代码的重复性、提高了代码的可读性和灵活性,总而言之,是个好东西!

快速上手CSS变量

第一步:声明一个CSS变量

:root {
  --main-bg-color: pink;
}

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

第二步:使用CSS变量

body {
  background-color: var(--main-bg-color);
}

第三步:没有第三步了

好了[aru_1],上手就这么简单,使用'--'即可声明css变量,使用过less和sass的同学就很快能明白这个和在css预处理器里用@和$声明一个变量是一样的,

使用的时候var(声明的变量名)就可以了~!

详细参考mdn:CSS（层叠样式表）var()

进入正题

快速实现网站一键换肤功能,上述讲述了css变量的使用方法,那重点来了,它既然是个变量,怎么变呢?[aru_12]

要更新 CSS 变量，只需在已声明变量的元素上调用setProperty 方法，并将变量名称作为第一个参数，将新值作为第二个参数传入。

例如:

(拿上述第一步第二步数据做例子)

// 读取数据
let root = document.querySelector(':root');
let rootStyles = getComputedStyle(root);
let bgColor = rootStyles.getPropertyValue('--main-bg-color').trim();
// bgColor 即是我们设置的--main-bg-color的值'pink'

// 改写数据
root.style.setProperty('--main-bg-color', '#88d8b0')
// --main-bg-color已经被set为'#88d8b0'
; }

一键换肤的思路

到这里已经很清晰了,你只需要在你网站css文件里声明一堆用得着的css变量,然后在统一设置网站各处需要统一的颜色样式 ,最后和你切换颜色的事件绑定即可.

具体可以体验小站右下角的一键换色功能,需要了解什么实用技术,欢迎给我留言~

完整实例

小站的一键换色是由取色器触发的,我单独写了一个小例子[aru_22],希望你看懂了~

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>css变量-子成君</title>
<style>
:root{
    --color: purple;
}
div.div{
    --color: green;
}
#alert{
    --color: red;
}
*{
    color: var(--color);
}
</style>
</head>
<body>
	<div style="width: 100%;height: 150px;background-color: var(--color)"></div>
<p>请问我是什么颜色 --purple</p>
<div class="div">请问我是什么颜色--green</div>
<div id="alert">
    请问我是什么颜色--red
    <p>请问我是什么颜色--red</p>
    <p style="--color: grey;">请问我是什么颜色--grey</p>
</div>
<div id="box"><input onchange="change(this.value)" type="color" id="myColor"></div>
<script>
// 读取数据
const rootStyles = getComputedStyle(document.documentElement);
const varValue = rootStyles.getPropertyValue('--color').trim();
console.log(rootStyles)
console.log(varValue)

// 改写数据
function change(e){
// const mycolor = document.getElementById("myColor").value;
document.documentElement.style.setProperty('--color', e);
console.log(e)
}
</script>
</body>
</html>

🎨 原创不易，支持请点赞、转载请注明本文作者为子成君

CSS CSS变量一键换肤