「JavaScript 30」學習筆記（三）

「JavaScript 30」Study Notes
,

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

製作調色盤和濾鏡的效果。

筆記

CSS 的部分，先在 :root 裡面命名變數。

1
2
3
4
5
:root {
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px;
}
  • 變數的開頭必須是兩個破折號（--）。

使用 var() 呼叫變數。

1
2
3
4
5
6
7
8
9
img {
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));
}

.hl {
    color: var(--base);
}
  • filter 可以做出濾鏡效果。
  • blur 是濾鏡效果的模糊。

JavaScript 的部分，先選取所有輸入框元素。

1
const inputs = document.querySelectorAll('.controls input');

設定一個 handleUpdate() 方法。

1
2
3
4
5
6
7
function handleUpdate() {
    // 取得單位（如果有的話）
    const suffix = this.dataset.sizing || '';

    // 改變 CSS 樣式表的變數値
    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
  • dataset 可以取得自定義屬性的値。
  • document.documentElement 會回傳目前文件中的根元素，即 <html> 元素。
  • setProperty 可以設置元素的鍵値屬性。

設定每一個輸入框元素只要有改變或滑鼠移過就觸發 handleUpdate() 方法。

1
2
3
inputs.forEach(input => input.addEventListener('change', handleUpdate));

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