通过 document.documentElement.style.setProperty() 方法
- 原理：
document.documentElement指向文档的根元素（通常是<html>元素），setProperty()方法用于设置CSS属性值。通过该方法，可以直接修改CSS变量的值，从而改变应用了该变量的元素的样式。 - 示例：假设在CSS中定义了一个名为
--main-color的变量，初始值为蓝色，想要通过JavaScript将其修改为红色，可以这样写：
:root {
--main-color: blue;
}
body {
background-color: var(--main-color);
}
// 获取文档根元素
var root = document.documentElement;
// 修改CSS变量的值
root.style.setProperty('--main-color', 'red');
在上述代码中，通过 setProperty() 方法将 --main-color 的值修改为红色，页面的背景颜色也会随之变为红色，因为 body 元素的背景颜色应用了该变量。
使用 getComputedStyle() 方法获取当前变量值并修改
- 原理：
getComputedStyle()方法可以获取元素的最终计算样式，包括应用了CSS变量后的实际样式值。通过该方法获取到当前CSS变量的值后，可以根据需要进行修改，并再次使用setProperty()方法设置新的值。 - 示例：以下代码演示了如何获取当前
--main-color变量的值，并在其基础上进行修改：
// 获取文档根元素
var root = document.documentElement;
// 获取当前 --main-color 变量的计算值
var currentColor = getComputedStyle(root).getPropertyValue('--main-color');
// 对获取到的值进行处理，例如将其颜色变深
var newColor = darkenColor(currentColor);
// 修改CSS变量的值
root.style.setProperty('--main-color', newColor);
function darkenColor(color) {
// 这里简单地将颜色的RGB值中的每个分量减50来变深颜色，实际应用中可根据具体需求更精确地处理
var r = Math.max(0, parseInt(color.slice(1, 3), 16) - 50).toString(16).padStart(2, '0');
var g = Math.max(0, parseInt(color.slice(3, 5), 16) - 50).toString(16).padStart(2, '0');
var b = Math.max(0, parseInt(color.slice(5, 7), 16) - 50).toString(16).padStart(2, '0');
return '#' + r + g + b;
}
在上述示例中，首先获取了当前 --main-color 变量的计算值，然后通过一个自定义函数 darkenColor() 将颜色变深，最后将新的颜色值设置回 --main-color 变量，实现了动态修改CSS变量并改变页面样式的效果。
通过类名切换修改CSS变量
- 原理：可以事先定义多个类，每个类中设置不同的CSS变量值，然后通过JavaScript动态地切换元素的类名，从而间接修改CSS变量的值。这种方法在一些复杂的样式切换场景中比较有用，可以将不同的样式组合定义在不同的类中，方便管理和维护。
- 示例：
.theme-light {
--text-color: black;
--background-color: white;
}
.theme-dark {
--text-color: white;
--background-color: black;
}
<button onclick="toggleTheme()">切换主题</button>
<p class="theme-light">这是一段文字</p>
function toggleTheme() {
var element = document.querySelector('p');
element.classList.toggle('theme-dark');
element.classList.toggle('theme-light');
}
在上述代码中，定义了两个类 theme-light 和 theme-dark，分别设置了不同的 --text-color 和 --background-color 变量值。当点击按钮时，通过JavaScript切换 p 元素的类名，从而实现了主题的切换，即改变了CSS变量的值和相应的页面样式。
使用 CSSStyleDeclaration 对象的 setProperty() 方法
- 原理：除了通过文档根元素的
style属性来设置CSS变量，还可以获取元素的style属性所对应的CSSStyleDeclaration对象，然后使用该对象的setProperty()方法来设置CSS变量的值。这种方法可以针对特定的元素来修改其应用的CSS变量，而不影响其他元素。 - 示例：
<p id="myPara" style="color: var(--text-color);">这是一段文字</p>
<button onclick="changeTextColor()">改变文字颜色</button>
function changeTextColor() {
var para = document.getElementById('myPara');
var style = para.style;
style.setProperty('--text-color', 'green');
}
在上述示例中，点击按钮时，通过获取 p 元素的 style 属性对象，并使用其 setProperty() 方法将 --text-color 变量的值修改为绿色，从而改变了该段落文字的颜色。
使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化，根据不同的应用场景和需求，可以选择合适的方法来实现CSS变量的动态修改，从而提高页面的灵活性和用户体验。
