在前端開發工作中，我們經常需要動態調整網頁的樣式。而設置CSS變量是一種簡單而有效的方法，它可以使我們在不破壞網頁樣式的前提下，對某些元素進行調整。JavaScript可以很方便地設置CSS變量，接下來我們就來學習一下如何使用JavaScript來設置CSS變量。
首先，我們可以使用以下語法來定義CSS變量：

:root {
--primary-color: #ff0000;
}

在這里，我們使用:root偽類來定義一個CSS變量--primary-color，它的值為#ff0000。我們也可以為不同的元素定義不同的CSS變量。
接下來，我們可以使用JavaScript來獲取和修改這些CSS變量。首先，我們可以使用以下代碼來獲取CSS變量的值：

const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');

在這里，我們使用getComputedStyle()方法來獲取document.documentElement元素（即文檔的根元素）的計算樣式，然后使用getPropertyValue()方法獲取--primary-color變量的值。注意，由于變量名前面需要加上--符號，因此在獲取變量值時也需要加上。
接下來，我們可以使用以下代碼來修改CSS變量的值：

document.documentElement.style.setProperty('--primary-color', '#00ff00');

在這里，我們使用setProperty()方法來修改document.documentElement元素的樣式，將--primary-color變量的值改為#00ff00。同樣需要注意的是，在修改變量值時，變量名前面需要加上--符號。
我們還可以將CSS變量的值作為動態值傳遞給JavaScript，例如：

const header = document.querySelector('header');
header.style.setProperty('--header-height', header.offsetHeight + 'px');

在這里，我們獲取header元素的高度，并將其與字符串px拼接成一個新的字符串，作為參數傳遞給setProperty()方法。這樣就可以動態地設置一個CSS變量了。
總結一下，JavaScript可以很方便地設置CSS變量，它的方式也非常簡單。在定義變量時，只需要在元素的樣式表中使用:root偽類，然后使用--符號來定義變量名。在獲取和修改變量值時，需要使用getComputedStyle()方法和setProperty()方法，并且變量名前面也需要加上--符號。在實際開發中，我們可以根據需要動態地修改變量值，以達到更好的視覺效果。