如何在 JavaScript 中访问和修改 CSS 变量？

通过 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变量。