---
# System prepended metadata

title: CSS 變數

---

# CSS 變數

![](https://i.imgur.com/YRF9YLL.gif)

**用兩個 - 宣告
用var()呼叫**

## CSS
```
:root{
  --bgc:black;
  --color:white;
}
```
1. 在CSS全域中宣告變數
 :root (也可用html)
 用『- -』宣告變數名稱
 e.x.
 --bgc: black;
 --color:white;


2. 使用var()呼叫
```
body{
  background-color: var(--bgc);
  color:var(--color);  
}
```

## JS 
* 先用forEach掛載每個button事件監聽
```
const theme = document.querySelectorAll('.theme button')
```
```
theme.forEach((btn)=>{
  btn.addEventListener('click',btnHandler)
})
```
* 使用document.documentElement選到根元素,判斷觸發哪一個button後,在中修改顏色

```
document.documentElement.style.setProperty('--bgc','#ffc0cb')
```

**另外關於setProperty**
```
style.setProperty(propertyName, value, priority);
```
- propertyName 要被更改的CSS目標
- value 新的屬性值,沒指定為空字串
- priority important之類的CSS優先層級,沒指定為空字串

<hr>

[範例練習](https://codepen.io/danielgg1024/pen/YzxMoPb)

