变量一定要设置在:root中(root：设置 HTML 文档的背景色)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Css变量</title><style>:root {--foo: red;--bar: black;}.box2 {margin: 20px;width: 100px;height: 100px;background-color: var(--bar);}</style></head><body><div><div class="box2">测试</div><div style="cursor: pointer;" onclick="setColor()">点我设置颜色</div></div><script>function setColor() {let htmlStyle = document.documentElement.style;if (htmlStyle.getPropertyValue("--bar").trim() === 'red') {htmlStyle.setProperty('--bar', 'black')} else {htmlStyle.setProperty('--bar', 'red')}console.log(htmlStyle.getPropertyValue("--bar").trim())}</script></body></html>
