深入理解与实战CSS变量
在CSS中使用变量可以帮助我们更好地管理样式并提高代码的可维护性。以下是如何在CSS中定义和使用变量的例子：
/* 定义CSS变量 */
:root {
--main-bg-color: coral;
--main-text-color: white;
}
/* 使用CSS变量 */
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
/* 通过JS修改CSS变量 */
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.setProperty('--main-bg-color', '#333');
document.documentElement.style.setProperty('--main-text-color', '#fff');
});在这个例子中，我们定义了两个变量--main-bg-color和--main-text-color，并在:root伪类中设置了它们的初始值。然后在body选择器中使用这些变量来设置背景颜色和文本颜色。最后，我们通过JavaScript的DOMContentLoaded事件监听函数在页面加载完成后修改这些变量的值。
评论已关闭