CSS變量
1.CSS變量定義
定義一個(gè)CSS變量拄显，需要使用 -- 開頭恤煞，如：--custom-color: red;屬性值是任何有效的CSS值(比如顏色值厚骗，px大小值另萤，字體，字號(hào)等)
屬性名是區(qū)分大小寫敏感的巫员，所以 --custom-color 和 --Custom-color 是兩個(gè)不同的變量
/* 此處的變量只是在element下生效庶香，該處element只是示例，可以是.className,#idName,body等 */
element {
--custom-color: red;
}
如果需要定義一個(gè)全局可以訪問到的CSS變量简识，則需要定義到根偽類 :root 下赶掖。這個(gè)變量是html下任何地方都可以訪問使用的
:root {
--custom-color: red;
}
2.CSS變量使用
使用CSS變量，需要使用 var() 函數(shù)七扰，如：var(--custom-color) 或者 var(--custom-color, red)
:root {
--custom-color: red;
}
.usebox {
color: var(--custom-color);
}
3.CSS變量錯(cuò)誤時(shí)備用值
某些情況下奢赂，我們可能需要給CSS變量設(shè)置一個(gè)備用值，當(dāng)CSS變量沒有設(shè)置值的時(shí)候戳寸，使用備用值呈驶。
.usebox {
color: var(--custom-color,orange); /* 如果--custom-color沒有值，則使用備用值orange */
}
4.CSS變量的有效性和值
因?yàn)镃SS變量的值是任何有效的CSS值疫鹊，所以CSS變量可以設(shè)置任何值袖瞻，比如px大小值，字體拆吆，字號(hào)等聋迎。但是如果將顏色的變量值賦值給字號(hào)大小，那就導(dǎo)致了變量值無(wú)效枣耀。此時(shí)霉晕，瀏覽器就會(huì)使用默認(rèn)值。
:root {
--custom-color: red;
}
.usebox {
font-size: var(--custom-color); /* 此處將顏色的變量值賦值給了字號(hào)，就導(dǎo)致了變量值無(wú)效牺堰，瀏覽器就會(huì)替換為默認(rèn)值(如black) */
}
5.在JavaScript中獲取和修改CSS變量
// 獲取某個(gè)元素節(jié)點(diǎn)上的CSS變量
element.style.getPropertyValue('--custom-color');
document.getElementById('element').style.getPropertyValue('--custom-color');
// 獲取任意DOM節(jié)點(diǎn)上的CSS變量
getComputedStyle(element).getPropertyValue("--custom-color");
// 修改某個(gè)Dom節(jié)點(diǎn)上的 CSS 變量
// 該操作可以用來(lái)實(shí)現(xiàn)主題色動(dòng)態(tài)切換等
element.style.setProperty("--custom-color", orange);
