CSS 變量可以讓我們在樣式表中使用變量，方便管理和更改樣式。但是，當我們需要在 JavaScript 中獲取 CSS 變量的值時，該怎么做呢？本文將介紹如何使用 CSS 提供的方法獲取變量值。
首先，要使用 CSS 變量，我們需要定義一個變量。定義變量的方法是使用 `--` 前綴，后面跟著變量名和變量值。例如：
```css
:root {
--primary-color: #007bff;
}
```
在這個例子中，我們定義了一個名為 `primary-color` 的變量，其值為 `#007bff`。接下來，我們可以在樣式表中使用這個變量：
```css
button {
background-color: var(--primary-color);
}
```
這樣，所有的按鈕都會使用 `primary-color` 變量的值作為它們的背景顏色。
現(xiàn)在，假設我們在 JavaScript 中想要獲取 `primary-color` 變量的值。CSS 提供了 `getComputedStyle` 方法來獲取計算后的樣式值。例如：
```javascript
const rootStyles = window.getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--primary-color');
```
在這個例子中，我們首先使用 `getComputedStyle` 方法獲取根元素（`:root`）的計算后樣式值。然后，我們使用 `getPropertyValue` 方法獲取 `primary-color` 變量的值。
最后，我們使用 `pre` 標簽來展示完整的代碼示例：
```html
CSS 定義變量：
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
}JavaScript 獲取變量值：
const rootStyles = window.getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--primary-color');如此，我們就可以輕松地在 JavaScript 中獲取 CSS 變量的值。