# CSS 變數


**用兩個 - 宣告
用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)