通过 document.documentElement.style.getPropertyValue() 和 document.documentElement.style.setProperty() 方法
- 访问CSS变量：使用
document.documentElement.style.getPropertyValue()方法可以获取CSS变量的当前值。该方法接受一个表示CSS变量名的字符串作为参数，返回对应的变量值。例如，如果在CSS中定义了--main-color: blue;，可以通过以下方式获取其值：
var mainColor = document.documentElement.style.getPropertyValue('--main-color');
console.log(mainColor); // 输出: blue
- 修改CSS变量：使用
document.documentElement.style.setProperty()方法来修改CSS变量的值。该方法接受两个参数，第一个参数是要修改的CSS变量名，第二个参数是新的变量值。例如，将--main-color的值修改为红色：
document.documentElement.style.setProperty('--main-color','red');
使用 getComputedStyle() 方法获取当前计算样式
- 访问CSS变量：
getComputedStyle()方法返回一个包含元素所有计算样式的对象，可以通过该对象获取CSS变量的当前计算值。例如：
var root = document.documentElement;
var computedStyle = getComputedStyle(root);
var mainColor = computedStyle.getPropertyValue('--main-color');
console.log(mainColor); // 输出: blue 或其他当前计算得到的值
这种方法获取的是元素在当前页面状态下实际应用的CSS变量值，考虑了所有可能影响变量值的因素，如样式继承、选择器特异性等。
- 修改CSS变量：通常情况下，
getComputedStyle()方法主要用于获取样式值，不能直接用于修改CSS变量。但可以结合document.documentElement.style.setProperty()方法来实现修改。即先通过getComputedStyle()获取当前值，进行必要的处理后，再使用setProperty()方法设置新的值。例如：
var root = document.documentElement;
var computedStyle = getComputedStyle(root);
var currentColor = computedStyle.getPropertyValue('--main-color');
var newColor = currentColor === 'blue'? 'green' : 'blue';
root.style.setProperty('--main-color', newColor);
通过类名切换来间接修改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');
}
在上述示例中，点击按钮时，通过JavaScript切换 p 元素的类名，从而改变了应用于该元素的CSS变量的值，实现了主题的切换效果。
针对特定元素的CSS变量访问与修改
- 访问CSS变量：除了通过文档根元素来访问和修改CSS变量，还可以针对特定的元素进行操作。首先获取目标元素的
style属性所对应的CSSStyleDeclaration对象，然后使用该对象的getPropertyValue()方法获取变量值。例如：
<p id="myPara" style="color: var(--text-color);">这是一段文字</p>
var para = document.getElementById('myPara');
var textColor = para.style.getPropertyValue('--text-color');
console.log(textColor);
- 修改CSS变量：同样，获取目标元素的
CSSStyleDeclaration对象后，使用setProperty()方法来修改其CSS变量的值。例如：
var para = document.getElementById('myPara');
para.style.setProperty('--text-color', 'green');
这样就可以单独修改特定元素所应用的CSS变量，而不影响其他元素。
通过以上方法，可以在JavaScript中灵活地访问和修改CSS变量，从而实现根据用户交互、页面状态等动态地改变页面样式，为网页添加更多的交互性和动态效果。在实际应用中，可以根据具体的需求和场景选择合适的方法来操作CSS变量。
