在開發Web頁面時，我們通常使用CSS來設置頁面的樣式。而在一些場景中，我們也需要使用JS來獲取CSS的變量值，然后進行一些操作。本文將介紹如何使用JS獲取CSS變量。

要獲取CSS變量，首先需要了解CSS變量的定義方式。CSS變量是通過聲明一個帶有--前綴的自定義屬性來實現的，如下所示：

:root {
--primary-color: #0085ff;
}

在CSS中，通過使用var()函數來引用這些自定義屬性，如下所示：

button {
color: var(--primary-color);
background-color: var(--secondary-color, #ff0000);
}

在上面的代碼中，color屬性引用了--primary-color自定義屬性，而background-color屬性引用了--secondary-color自定義屬性，并提供了一個默認值（#ff0000）。

為了獲取這些自定義屬性的值，我們可以使用JS的getComputedStyle()方法。該方法返回元素的所有計算樣式，并可以使用getPropertyValue()方法獲取某個樣式的值。例如：

const element = document.querySelector('button');
const style = getComputedStyle(element);
const primaryColor = style.getPropertyValue('--primary-color');
const secondaryColor = style.getPropertyValue('--secondary-color');
console.log(primaryColor); // 輸出：#0085ff
console.log(secondaryColor); // 輸出：#ff0000

在上面的代碼中，我們首先使用querySelector()方法獲取button元素，然后使用getComputedStyle()方法獲取該元素的計算樣式。最后，我們使用getPropertyValue()方法獲取--primary-color和--secondary-color自定義屬性的值，并將其存儲在primaryColor和secondaryColor變量中。

現在，通過使用JS獲取CSS變量已經變得非常簡單了。借助此功能，我們可以根據不同的條件動態更改CSS中的變量，以實現更好的用戶體驗。