[筆記][JS30天-Day03] Playing with CSS Variables and JS

實做：使用JS控制CSS來改變圖片效果

---

學習重點

• 建立 CSS 全域變數 :root （IE 和 Edge 目前不支援）
• 利用 JS 動態改變 CSS 變數

---

解說

• 定義CSS全域變數 :root{ --變數名稱 : 變數值 }

:root {
  --color: #fff;
}

• 使用變數 var( --變數名稱 )

img {
  background: var(--base);
}

• 使用data attribute 定義單位 ex. px ，如果值是顏色就不需要

<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"/>
<input type="color" name="base" value="#ffc600" />

• 使用 JS 取得 data attribute 值，即我們定義的單位

const suffix = this.dataset.sizing || ' ' ; //取得自定義屬性data-sizing，若沒有就給空值

• 使用 JS 動態改變 CSS 變數值

利用 document.documentElement.style.setProperty( '--變數名稱', '變數值' ) 動態改變 CSS，並且加上單位

document.documentElement.style.setProperty(`--${this.name}`,this.value+suffix);

補充

:root
CSS濾鏡