📅 最后修改于: 2023-12-03 14:51:55.482000 🧑 作者: Mango
CSS 变量是一种可以在整个文档中重复使用的值，可以通过 JavaScript 更改它们来控制页面的外观和行为。本文将向您介绍如何使用 JavaScript 更改 CSS 变量。
首先，您需要在 CSS 中设置要更改的变量。可以通过在 :root 伪类中使用 -- 前缀来设置全局变量。例如：
:root {
--primary-color: #FF5722;
}
这将创建一个名为 --primary-color 的变量，其值为 #FF5722。您可以在任何元素中使用它：
button {
background-color: var(--primary-color);
}
这将使所有按钮的背景颜色变为 #FF5722。
要在 JavaScript 中更改 CSS 变量，您需要访问元素的样式对象，并将新值分配给变量。例如，要将 --primary-color 更改为红色，您可以编写以下代码：
document.documentElement.style.setProperty('--primary-color', 'red');
此代码将找到文档元素（即 <html> 元素），获取其样式对象，并将 --primary-color 的值更改为红色。
您可以使用 input 事件监听器在输入更改时更新变量。例如，以下代码将在滑块值更改时将 --primary-color 更改为选定的颜色：
<input type="range" min="0" max="255" id="slider" value="127">
const slider = document.getElementById('slider');
slider.addEventListener('input', (event) => {
const value = event.target.value;
document.documentElement.style.setProperty('--primary-color', `rgb(${value}, 0, 0)`);
});
此代码将侦听 input 事件并取得事件对象的 target.value（由滑块的值确定）。然后，它将更改 --primary-color 为 rgb(${value}, 0, 0)。
这是使用 JavaScript 更改 CSS 变量的简单方法。您可以使用这种技术来更改任何在 CSS 中定义过的变量。