CSS变量的应用
开篇
今天在学东西的时候看到了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变量的简单应用，希望对您有所帮助。