Javascript 30 Day03:
CSS Variables
專案目標：
利用控制條來調整圖片邊框粗細、邊框色彩以及模糊程度的濾鏡效果。
我的解法：
實作成果
1
2
3
4
5
6
7
8
9
10
11
|
const image = document.querySelector("img");
function getValue(){
let spacing = document.getElementById("spacing").value;
let blur = document.getElementById("blur").value;
let baseColor = document.getElementById("base").value;
image.style.border = `${spacing}px solid ${baseColor}`;
image.style.filter = `blur(${blur}px)`;
}
document.addEventListener('mousemove', getValue);
|
我的解法比較簡單粗暴一點，主要是用 getElementById 取得元素的值，然後綁定 mousemove 事件監聽。再用 .style 和樣板字面值來修改元素的 class 屬性。
Wes Bos 的解法：
Wes Bos 的解法則有意思得多。
首先是在 CSS 中用了我不太熟悉的 :root 根目錄選取器，同時也是這個範例的核心主題，但我一開始解的時候完全沒有注意到，就直接用自己熟悉的方式來解。等解完再回頭看 Wes Bos 的寫法，才發現到這個主題有使用 :root 根目錄選取器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
|
再來是 Wes Bos 有運用邏輯運算子 || 的短路求值。
const suffix = this.dataset.sizing || '';
以及用 style.setProperty 簡潔優雅地修改目標元素的 CSS 屬性。
document.documentElement.style.setProperty(–${this.name}, this.value + suffix);
1
2
3
4
5
6
7
8
9
|
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));
|
type=”range” 的 input 樣式為橫向拉桿，並由 min="" max="" 來設定由右至左兩端的極限值，跟其他 input 一樣使用 value="" 建立預設值。
觀念二：滑鼠事件 mouse Event
mousedown：滑鼠按鍵按下時觸發
mouseup：滑鼠按鍵放開時觸發
mousemove：滑鼠指標在指定的元素中移動時觸發。（注意：使用者把滑鼠移動一個畫素，就會發生一次 mousemove 事件。處理所有 mousemove 事件會耗費系統資源。請謹慎使用該事件。）
延伸閱讀：
觀念三：:root 根目錄選取器
- 建立變數的語法：
:root {--variable name: value}
1
2
3
4
5
|
:root {
--base: #ffc660;
--spacing: 10px;
--blur: 10px;
}
|
- 套用變數的語法：
var(--variable name)
1
2
3
4
5
6
7
8
9
|
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
|
延伸閱讀：
觀念四：style.setProperty 為目標元素設置新的 CSS 屬性值
語法：style.setProperty(propertyName, value, priority);
priority 可以填入 “important” 如果没有指定，就是空字串。`
延伸閱讀：
