Day 3 - Update CSS Variables with JS

使用JS動態改變CSS變數

What's new?

1. 表單元素與屬性 運用/ /
2. forEach 與 箭頭函式 使用
3. addEventListener - change事件 / mousemove 事件
4. function函式的this
5. document.documentElement.style.setProperty()的方法，選擇整個文件
6. CSS :root 取代 Sass $

How to do?

1. 監聽每個input的改變，以動態改變CSS變數
2. 使用forEach: 選取所有的inputs，使用forEach個別監聽

CSS :root 使用

1.定義變數:CSS Variables的變數定義在 :root (rootElemente)最高層級的選取器便於取用，定義時前面需加上 -- 。
2.取變數值：加入 var (--變數名稱)。

:root{
    --spacing: 10px;
    --blur: 10px;
    --base: #d2acac;
}
/*使用時*/
box{
    padding: var(--spacing);
    background: var(--base);
    fliter: blur(var(--blur));
}

JS

1. 選取每個inputs

   const inputs =document.querySelectorAll('.control input');
   

2. 使用forEach: 選取所有的inputs，使用forEach個別監聽

   inputs.forEach(input=>input.addEventListener('change',handleUpdate,false));
   inputs.forEach(input=>input.addEventListener('mousemove',handleUpdate,false));
   

   除了change外，會再監聽mousemove是因為，change只有當放開滑鼠鍵時才會執行改變，mousemove的話，就算只是滑鼠在上面移動也會監聽到。
3. 監聽後，我們要將監聽到的改變值，動態改變CSS變數我們要監聽的三樣屬性分別是base顏色/spacing/blur。

   function handleUpdate(){}
   

   除了base顏色式數值外，其他兩個再改變css時都是需要再加上suffix=px的。
   因此我們在html上自訂屬性datas-sizing=px，並設定:
   監聽時點選到的物件的suffix是甚麼。
   (由於base並沒有data-sizing設定，所以加上or空值。不然當移動base時，suffix就會出現undefined。)

   const suffix=this.dataset.sizing || "";
   

   可以試看看console.log(this.value+suffix);

重點中的重點 - 如何選取CSS Variable ?

因為:root就是直接對文件的，直接選擇文件的style即可

document.documentElement.style.setProperty('變數名稱','值');

input上都有設定name，就和我們所設定的變數名稱一樣。因此變數名稱我們可以用this.name來抓。
值就是前面所抓的this.value+suffix

完整JS

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

inputs.forEach(input=>input.addEventListener('change',handleUpdate,false));
inputs.forEach(input=>input.addEventListener('mousemove',handleUpdate,false));

VVV 我的所有筆記與demo在這裡 VVV
https://github.com/hoyi-23/JavaScript30