使用 JavaScript 更改 CSS 变量

利用 JavaScript，我们可以在网页中实时更新 CSS 变量的值，从而实现动态的效果。

CSS 变量

CSS 变量是一种用于存储值的容器，类似于代码中的变量。它们以 -- 开头，可以在 CSS 中任何地方使用。

:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}

在这个例子中，我们在 :root 选择器中定义了一个名为 --primary-color 的 CSS 变量，并且在 .button 类中使用该变量作为背景颜色。使用 var() 函数来引用变量。

使用 JavaScript 更新 CSS 变量

我们可以利用 JavaScript 来获取并更新 CSS 变量的值。

<style>
:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}

</style>

<button id="btn">更改颜色</button>

<script>
const btn = document.querySelector('#btn');
const root = document.querySelector(':root');
const primaryColor = root.style.getPropertyValue('--primary-color');

btn.addEventListener('click', () => {
  root.style.setProperty('--primary-color', '#e74c3c');
});
</script>

这个例子中，我们使用 .querySelector() 方法获取了 ID 为 btn 的按钮和 :root 元素。然后，我们使用 .getPropertyValue() 方法获取了 --primary-color 变量的值。最后，我们使用 .setProperty() 方法来更新变量的值。

当按钮被点击时，我们会将 --primary-color 变量的值更改为红色（#e74c3c）。

结论

使用 JavaScript 更改 CSS 变量让我们能够实现动态的视觉效果。我们可以使用 var() 函数在 CSS 中引用变量，并使用 JavaScript 来更新变量的值。这为网页开发提供了更多的灵活性和控制性。