第三堂 – CSS Variables

 邏輯流程
給定CSS變數
讓img使用CSS變數
監聽三個控制項的值
改變CSS變數的值
課程重點
CSS變數宣告：–variable:value，變數宣告必須以兩個減號開頭。
CSS變數使用：var(–variable)，使用變數需以var()來包住變數。
利用data-attribute(第一堂提過的屬性)來設定CSS變數的單位。
利用document.documentElement.style.setProperty()來更新CSS變數。
延伸閱讀
NodeList和Array差別：實作中querySelectorAll()所取得的element會被包成一個看起來像Array的陣列，但他事實上是NodeList而不是Array。NodeList是可以轉換成Array的，而他們的差異是在於能夠使用的函式不一樣，NodeList只有少數幾個，Array有一大串的函數可以用。

label的for屬性：使label跟其他element綁在一起，如下方參考來源網站的範例，label和radio button綁在一起，這時候點選label文字也能夠觸發click。

Chrome console裡變數的__proto__屬性，記錄該變數型態所能使用的函式。

實作中用到this.dataset，dataset就是將該element所有的data-attribute組成的一個物件。

實作中在宣告suffix時用到了||，因為base這個element沒有data-sizing這個屬性，若不加入||”，會是undefined

const suffix = this.dataset.sizing||”