CSS变量
1.CSS变量定义
定义一个CSS变量，需要使用 -- 开头，如：--custom-color: red;属性值是任何有效的CSS值(比如颜色值，px大小值，字体，字号等)
属性名是区分大小写敏感的，所以 --custom-color 和 --Custom-color 是两个不同的变量
/* 此处的变量只是在element下生效，该处element只是示例，可以是.className,#idName,body等 */
element {
--custom-color: red;
}
如果需要定义一个全局可以访问到的CSS变量，则需要定义到根伪类 :root 下。这个变量是html下任何地方都可以访问使用的
:root {
--custom-color: red;
}
2.CSS变量使用
使用CSS变量，需要使用 var() 函数，如：var(--custom-color) 或者 var(--custom-color, red)
:root {
--custom-color: red;
}
.usebox {
color: var(--custom-color);
}
3.CSS变量错误时备用值
某些情况下，我们可能需要给CSS变量设置一个备用值，当CSS变量没有设置值的时候，使用备用值。
.usebox {
color: var(--custom-color,orange); /* 如果--custom-color没有值，则使用备用值orange */
}
4.CSS变量的有效性和值
因为CSS变量的值是任何有效的CSS值，所以CSS变量可以设置任何值，比如px大小值，字体，字号等。但是如果将颜色的变量值赋值给字号大小，那就导致了变量值无效。此时，浏览器就会使用默认值。
:root {
--custom-color: red;
}
.usebox {
font-size: var(--custom-color); /* 此处将颜色的变量值赋值给了字号，就导致了变量值无效，浏览器就会替换为默认值(如black) */
}
5.在JavaScript中获取和修改CSS变量
// 获取某个元素节点上的CSS变量
element.style.getPropertyValue('--custom-color');
document.getElementById('element').style.getPropertyValue('--custom-color');
// 获取任意DOM节点上的CSS变量
getComputedStyle(element).getPropertyValue("--custom-color");
// 修改某个Dom节点上的 CSS 变量
// 该操作可以用来实现主题色动态切换等
element.style.setProperty("--custom-color", orange);
