# 【JS30】Day3 - Playing with CSS Variables and JS
## 怎麼做出瀏覽器中的"調整器"
###### tags: `CSS變數`、`data-*`、`style.setProperty`、`this`
本章節畫面中的顏色選擇器、模糊度選擇器，都是透過input做的。當然還要搭配函式。

<div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>

上方程式碼中的```type="range"```、```type="color"```，決定了[iuput的樣式](https://www.w3schools.com/tags/att_input_type.asp)，最常見的input當然是輸入的欄位。

---

## CSS變數觀念
以前在寫CSS的時候，還沒有CSS變數的觀念，當我想要改某個東西，就用編輯器選取要改的，再按ctrl+D，一次選起來改完。後來看了[這篇](https://medium.com/hulis-blog/frontend-engineer-guide-297821512f4e)，才知道可以把CSS設成變數，要改的話改變數就好了！

但CSS預處理器已經把變數處理好後，靜態網頁是無法再改變變數的。簡單來說，要在瀏覽器改變CSS變數，就用原生的寫法。

利用 :root{--<varName>: <varValue>}建立CSS變數，並且在CSS屬性值中使用 var(--<varName>) 來代入變數的值：

:root {
    --base: #ffc600;
    --spacing: 10px;
}

img {
    display:block;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--spacing);
    background: var(--base);
}

---
## 用JS改變CSS變數
1.先選取DOM是必要的。下方程式碼已經把全部的input選起來。
2.當這些DOM改變後，執行函數。
3.定義函數。

<script>
    const inputs = document.querySelectorAll('.controls input');

    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
    
    function handleUpdate() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }
  </script>

這邊，我們要讓調整器被改變時，觸發一些行為(函式)。所以要先定義調整器的DOM。**想法是：讓每個調整器都可以被個別觸發；而不是只碰一個調整器，全部的調整器都被觸發。**

console一下（如上圖），會發現```document.querySelectorAll('.controls input')```裡面有個_proto_顯示為nodeList，點開會看到forEach，而更內層的_proto_顯示的是Object（物件）。
奇怪，怎麼會有forEach的用法，難道inputs是陣列嗎？

**這看起來像是陣列，但其實不是。所以這個偽陣列中沒有陣列的全部用法（像是.map）**。查閱"偽陣列"可以發現很多轉換成陣列的資料。
也可以將此轉換成陣列，但沒有必要，因為已經可以用forEach這個方法了，除非使用的是不支援的舊瀏覽器。

---

## data-*

function handleUpdate() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);

suffix是字尾的意思。這裡用到了[dataset](https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLElement/dataset)這個神奇的東西。
開發者可以自訂dataset，在html檔案中取名為data-* ；用DOM時，可以用.dataset來取用。

可是dataset要用來做什麼呢？dataset可以自定義屬性，用自定義屬性，來進行一些數據的存放。

這裡的```this.dataset.sizing```，```dataset.sizing```就是自定義資料```data-sizing```，也就是調整器的數值。
並加上 ```|| ' '``` ，因為不是每個調整器都有字尾，blur大小的調整器有px，但顏色調整器就沒有，所以沒有字尾就給空字串。

## this是什麼？為什麼要加上它？
[this是什麼](https://translate.google.com.tw/translate?hl=zh-TW&sl=zh-CN&u=https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this&prev=search)？簡單來說，在函數內部， this的值取決於函數被調用的方式。

為什麼要加上它？
因為上方程式中，DOM抓取了全部的input，但我只需要我點選的"這個"input被觸發就好，而不是全部的input被觸發。


---
## style.setProperty
搞定DOM後，處理函式吧。

function handleUpdate() {
const suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);

.someClass{
color:white;
property:propertyName;
}