开篇
今天在学东西的时候看到了CSS变量的应用。简单来说，CSS变量，也称为CSS自定义属性，是一种允许开发者定义并重复使用的值的机制。它们以 – 开头，可以在整个样式表中使用，并通过 var() 函数引用。
话不多说，请看下面的例子。
主题切换代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>:root {--background-color: #f0f0f0;--text-color: #333;}.dark-theme {--background-color: #333;--text-color: #f0f0f0;}div {width: 100%;height: 100vh;background-color: var(--background-color);color: var(--text-color);}</style>
</head>
<body><button class="btn">切换主题</button><div id="myDiv">测试</div><script>let btn = document.querySelector('.btn')let myDiv = document.querySelector('#myDiv')btn.addEventListener('click', () => {myDiv.classList.toggle('dark-theme')})</script>
</body>
</html>
注
以上便是CSS变量的简单应用，希望对您有所帮助。