- html屬性設定：
- type: range是手拉動值選取，要設min和max (*input type)
- name: 設定與css變數名相同
- data-sizing: 設定好這筆資料的資料屬性註解，例如單位px
//padding
<input id=”spacing” type=”range” name=”spacing” min=”10" max=”200" value=”10" data-sizing=”px”>//blur
<input id=”blur” type=”range” name=”blur” min=”0" max=”25" value=”10" data-sizing=”px”>//color
<input id=”base” type=”color” name=”base” value=”#ffc600">
2. 一次選取多個元素(querySelectorAll)並，並使用forEach綁定監聽
input.forEach(input=>input.addEventListener(‘change’,handleUpdate))*雖然 NodeList 不是 Array，但仍可以使用 forEach() 方法來進行迭代。一些老舊瀏覽器並未實作此方法。
3. 讀取資料屬性的註解（此為單位px），並設定為變數
HTMLElement.dataset允許在讀取與寫入模式時使用HTML或DOM裡，所有設置在元件上的自定義資料屬性(data-*)。
const suffix=this.dataset.sizing||’’; //若沒有設定data則為空字串4. 在CSSStyleDeclaration中寫入自訂的變數-值配對（感覺有像宣告變數）
document.documentElement.style.setProperty(`—-${this.name}`,this.value+suffix) // (自訂屬性, 值)
因此每當改變input時，就會在style中寫入CSS變數與其值，如下圖二，然後CSS的樣式表會讀取 — spacing:156px，也就是 — spacing代表156px，這時便會設定padding:156px
＊完成程式碼後，無聊把 :root{} 註解掉（但img的變數依然留著），重新整理，雖然初始的圖片樣式不見了，但是change input時，還是能正常改變圖片樣式，因此documentElement.style(CSSStyleDeclaration)setProperty類似宣告CSS變數與其值的效果，所以每次change input都就重新在 :root(*root就是只html，但級別更高)設定變數一樣。
img {
padding: var( — spacing);
background-color: var( — base);
filter: blur(var( — blur))}
