从 JavaScript 中设置 CSS 变量

在前端开发中，CSS 变量是一个非常便利的特性，可以通过设置变量来统一管理网页中的颜色、字体大小等。而通过 JavaScript 来设置这些变量则更加灵活方便。在本文中，我们将学习如何从 JavaScript 中设置 CSS 变量。

1. 什么是 CSS 变量？

CSS 变量是通过 var() 函数来使用的，例如：

:root {
  --main-color: #006cff;
}

p {
  color: var(--main-color);
  font-size: var(--font-size, 16px);
}

上述 CSS 代码中，我们通过 :root 选择器定义了一个名为 --main-color 的 CSS 变量，其值为 #006cff。在 p 元素中，我们通过 var(--main-color) 来使用该变量设置文本颜色，可以看到它直接将文本颜色设置为了 #006cff。

CSS 变量不仅可以设置颜色，还可以设置文本大小、边框样式等等。

2. 如何从 JavaScript 中设置 CSS 变量？

通过 JavaScript 来设置 CSS 变量非常简单，只需要将变量的值赋给 CSS 变量即可。例如，我们可以通过下面的代码来将 --main-color 的值设置为红色：

document.documentElement.style.setProperty('--main-color', 'red');

上述代码中，我们使用 document.documentElement 来获取整个文档的根元素，然后使用 style.setProperty() 方法来设置 --main-color 的值为红色。

设置完毕后，我们可以在浏览器的开发者工具中检查样式，可以看到 p 元素的颜色已经变成了红色。

3. 动态地设置 CSS 变量

通过 JavaScript 来设置 CSS 变量非常灵活，我们可以根据不同情况来动态地设置变量的值。例如，我们可以在用户点击按钮时，将主色调变成蓝色：

const button = document.querySelector('.button');
button.addEventListener('click', () => {
  document.documentElement.style.setProperty('--main-color', 'blue');
});

上述代码中，我们使用 document.querySelector() 方法来获取一个名为 button 类的按钮元素，然后使用 addEventListener() 方法来为按钮添加点击事件，在点击事件中将 --main-color 的值设置为蓝色。

除了点击事件，我们还可以在其他情况下通过 JavaScript 来动态地设置 CSS 变量的值，例如根据窗口尺寸改变字体大小等等。

4. 总结

通过 JavaScript 来设置 CSS 变量是一种非常方便灵活的方式，我们可以通过设置变量来统一管理网页中的样式，还可以根据不同情况来动态地设置变量的值。在实际开发中，我们需要灵活地使用这种技巧，以提高代码复用性、可维护性。