本文目錄導(dǎo)讀：

1. 使用JavaScript修改CSS變量
2. 使用CSS選擇器重新定義變量值

CSS變量（也稱為自定義屬性）的靈活使用為前端開發(fā)帶來了極大的便利，直接修改CSS變量值在CSS中并不被支持，一旦定義了變量，它們的值在樣式表中就是固定的，不能被直接更改，如何在CSS中修改變量的值呢？我們可以通過以下幾種方式實現(xiàn)：

使用JavaScript修改CSS變量

JavaScript允許我們在運行時動態(tài)地修改CSS變量的值，我們可以通過操作元素的style屬性或者直接修改元素的setAttribute方法來改變變量的值。

document.documentElement.style.setProperty('--my-var', 'new value'); // 直接修改根元素的樣式屬性
element.setAttribute('style', '--my-var: new value'); // 修改特定元素的樣式屬性

使用CSS選擇器重新定義變量值

雖然CSS本身不支持直接修改變量的值，但我們可以使用不同的選擇器針對不同的元素定義不同的變量值。

:root {
  --main-color: blue; /* 定義全局變量 */
}
.special-element {
  --main-color: red; /* 針對特定元素重新定義變量值 */
}

在這種情況下，.special-element元素的--main-color變量會被重新定義為紅色，覆蓋全局定義的藍(lán)色，但請注意，這種方式并不是真正意義上的修改原有變量的值，而是為特定元素定義新的變量值。

三、使用CSS預(yù)處理器（如Sass或Less）中的變量功能

如果你使用的是Sass或Less這樣的CSS預(yù)處理器，你可以利用其提供的變量功能來模擬“修改變量值”，預(yù)處理器允許你在樣式表中定義變量并在需要時更改它們的值，在Sass中：

$color: blue; // 定義變量并初始化為藍(lán)色
...
.some-element {
  color: $color; // 使用變量值作為樣式屬性值
}
// 在需要時更改變量的值
@if someCondition {
  $color: red; // 改變變量的值（在預(yù)處理階段）
}
``` 需要注意的是，這種修改是在編譯預(yù)處理器的階段完成的，而不是在瀏覽器運行時動態(tài)修改的，一旦編譯成CSS文件后，變量的值就是固定的了，因此這種方式更像是在編寫代碼時的一種策略性選擇而非實時修改，雖然CSS本身不支持直接修改變量的值，但我們可以通過JavaScript和預(yù)處理器來間接實現(xiàn)類似的效果，在實際開發(fā)中可以根據(jù)需求選擇合適的方式。