挑戰 JS30 #3 - CSS Variables

傑米

2023/09/04閱讀時間約 7 分鐘

本次的挑戰是「CSS Variables」，需要達成的目標是：

「使用者操作拉桿或是選色器時，底下圖片的樣式會有對應的變化。」

此次挑戰涉及以下內容：

input 標籤
效果對應的 CSS 屬性
CSS 變數
事件綁定

嘗試拆解流程

畫完流程圖之後，很容易看出自己不確定的部分，將這些部分各個擊破以後，也就順利梳理出實作的脈絡，所以這次挑戰比預期還快完成。

雖然看了作者的寫法以後，又發現自己寫得好冗哈哈，這篇文章就一起來看看此次挑戰有哪些知識點和需要修正的地方吧！

看完作者的寫法之後，發現流程可以簡化成這樣

知識點

CSS - filter 屬性

可以套用模糊、對比等濾鏡效果，更多值可參考 MDN

filter: blur(10px); //模糊
filter: brightness(10%); //明亮

CSS 變數

宣告變數：通常會放在 :root 選擇器中，並使用 --變數名稱 方式來宣告

:root{
 --bg-color: #ccc;
 --primary: #333;
}

取用變數：需要使用 var 取值

body{
 background-color: var(--bg-color);
}

還可以寫得更好的地方

JS30 作者直接透過迴圈監聽每個 input，筆者則是一個一個手動挑出來，程式碼不只冗長，還很沒有效率，以下比較看看兩者寫法：

筆者的寫法

const spacerController = document.querySelector("#spacing");
const blurController = document.querySelector("#blur");
const colorController = document.querySelector("#base");
const target = document.querySelector("img");

function changeSpacer() {
  target.style.borderWidth = `${spacerController.value}px`;
}
function changeBlur() {
  target.style.filter = `blur(${blurController.value}px)`;
}
function changeColor() {
  target.style.borderColor = `${colorController.value}`;
}

spacerController.addEventListener("input", changeSpacer);
blurController.addEventListener("input", changeBlur);
colorController.addEventListener("input", changeColor);

作者的寫法

const inputs = document.querySelectorAll(".controls input");

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

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

這次比較多是寫法上可以再調整的地方，所以下面會再進一步探討：

CSS 變數 + documentElement

將變數放到 :root 裡，再透過 JS 去選擇根元素，就能直接對一開始在 :root 裡宣告的變數做操作，也就能直接變動套用了這些變數的 CSS 屬性，相當方便！

另外都是透過 input 的 name 或是自行新增 data 屬性來組合出想要指向的變數名稱與單位，以及 value 取得數值

<input
  id="spacing"
  type="range"
  name="spacing"
  min="10"
  max="200"
  value="10"
  data-sizing="px"
/>;

:root {
  --base: #fff;

  //這邊的值要對應 input 元素的 value 值，視覺和實際值才會相符
  --spacing: 10px;
  --blur: 10px;
}

img {
  border-width: var(--spacing);
  border-style: solid;
  border-color: var(--base);
  filter: blur(var(--blur));
}

function control(){
 //如果 this.dataset.size 為 true 就回傳該值
 //為 false 就回傳空字串
 const unit = this.dataset.size || "";
 document.documentElement.style.setProperty(`--${this.name}`, this.value+unit;
}

之後透過 forEach 迴圈將事件賦予到所有 input 元素上。

`input` 事件

比較特別的是這邊的事件是使用 "input"，當滑鼠拖曳時就會觸發事件，原本一開始是使用 "change" 事件，但是都要在滑鼠拖曳再放開後才會觸發事件，相對沒那麼即時。

const controllers = document.querySelectorAll(".controls input");
controllers.forEach((controller) => {
  controller.addEventListener("input", control);
});