使用 CSS 自定义属性（变量）

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);

参考资料：MDN-Using_CSS_custom_properties