1.自定义变量
不使用less,scss等预编译处理器时，原生css也可以自定义变量。
自定义的css变量有一定的命名规则，变量名前需要是两个“破折号”，然后为其赋值。
比如 --day-color:white;
注意：万恶的IE浏览器不支持CSS原生变量定义。
2.使用自定义变量
在css属性后使用 var(变量名) 即可。
background-color:var(--day-color)；
加入回退值，在变量值不生效的时候会使用该值
background-color:var(--day-color,white)；
3. :root
:root 选择器匹配文档根元素。
注意：在 HTML 中，根元素始终是 html 元素。
一般在:root里写入自定义变量，这样整个页面就都可以使用该变量了
4.白天黑夜切换示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS自定义变量</title>
<style>
:root{
--day-color:#f1f2f6;
--night-color:black;
}
div.bg{
width: 500px;
height: 500px;
margin:auto;
background-color: var(--day-color,white);
border:2px solid #eee;
}
button.change{
width: 50px;
height: 50px;
margin:auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5px;
color:blue;
}
</style>
</head>
<body>
<div class="bg">
</div>
<button class="change">
变化
</button>
<script>
let btn = document.querySelector('button');
btn.onclick = function(){
//读取根样式
const rootStyles = getComputedStyle(document.documentElement);
//读取颜色值
const bgColor = rootStyles.getPropertyValue('--day-color');
console.log(bgColor)
// 变换颜色值
if(bgColor==="#f1f2f6"){
document.documentElement.style.setProperty('--day-color','var(--night-color)')
}else{
document.documentElement.style.setProperty('--day-color','#f1f2f6')
}
}
</script>
</body>
</html>