CSS是一種用于控制網頁展示效果的語言，它可以控制網頁的布局、字體、顏色、大小等屬性。而JavaScript是一種用于添加交互和動態效果的語言，可以將網頁變得更加生動和有趣。

在CSS中，我們可以使用變量來存儲顏色、字體、尺寸等屬性。在CSS中定義變量非常簡單，只需要使用兩個減號（--）開頭，后面跟上變量名和對應的值，就可以創建一個變量，如下所示：

:root {
--main-color: #ff9800; /* 定義主色變量 */
}

現在我們已經定義了一個變量，但是，在CSS樣式表中，我們無法使用JavaScript動態修改這個變量的值。這時候，我們就需要使用JavaScript幫助我們實現這個變量的動態修改。

我們可以通過JavaScript來獲取CSS中的變量，并且動態修改它們的值。在JavaScript中，我們可以使用getComputedStyle()函數獲取元素的計算屬性，包括CSS變量的值。我們還可以使用setProperty()函數在運行時動態修改CSS屬性，包括CSS變量的值。如下面代碼所示：

// 獲取元素的計算屬性
var element = document.getElementById("example");
var style = getComputedStyle(element);
// 獲取CSS變量的值
var mainColor = style.getPropertyValue('--main-color');
// 修改CSS變量的值
element.style.setProperty('--main-color', '#f44336');

通過這樣的方式，我們就可以實現在JavaScript中動態修改CSS中的變量了，這樣可以大大提高網頁的靈活性和可交互性，讓我們的網頁更加生動和有趣。