本次的挑戰是「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);
});
附上此次實作結果，今天就介紹到這裡，若有錯誤歡迎指正，也歡迎大家分享自己的看法。
