Day3: CSS Variables

專案介紹：使用 JavaScript 及 CSS3 去調整圖片的邊框間距、模糊度、及背景顏色，標題 JS 也隨著背景顏色而改變。

作品頁面： https://iris1114.github.io/javascript30/03_CSS-Variables/index.html

1. 做法：

建立 css 變數
當改變間距、模糊度、背景色時，用 js 動態改變 css 的值

2. CSS 變數的使用

:root 工作中都沒有機會用過，看了 Amos 文章才知道主要是搭配 css 變數來應用。主要分為建立變數及套用變數。

建立變數可建立全域變數或是區域變數。全域則可以使用該變數，則區域就只有建立的區域能使用。

而套用變數，只要在要套用的地方使用關鍵字 var( ) 並在括號內寫上變數名稱，就套用成功了。

1/*建立 css 全域變數*/
2:root {
3  --base: #ffc600;
4  --spacing: 10px;
5  --blur: 10px;
6}
7
8/*建立 css 區域變數*/
9.section {
10  --base-area: #ffc600;
11}
12
13/* 套用變數 */
14img {
15  padding: var(--spacing);
16  background: var(--base);
17  filter: blur(var(--blur));
18}
19
20.hl {
21  color: var(--base);
22}

3. input element

當一個 <input>, <select>, 或 <textarea> 元素的 value 被修改時，會觸發 input 事件。

注意：每當元素的 value 改變，input 事件都會被觸發。這與 change 事件不同。 change 事件僅當 value 被提交時觸發。

原本我是使用 change 事件，但上網看到有人使用 input, 才知道只要 value 改變就會被觸法，這對於更換背景色的 UX 效果更好，所以最後使用了 input 事件。

4. 動態改變 CSS

可以利用 document.documentElement.style.setProperty('--<varName>', '<varValue>') 來動態修改 CSS 變數的值。

1document.documentElement.style.setProperty(
2  `--${this.name}`,
3  `${this.value}${suffix}`
4);

5. code

1(() => {
2  const inputs = document.querySelectorAll("input");
3
4  function changeHandle() {
5    const suffix = this.name === "base" ? "" : "px"; //記得加px,背景色則不用px
6    document.documentElement.style.setProperty(
7      `--${this.name}`,
8      `${this.value}${suffix}`
9    );
10  }
11
12  inputs.forEach((input) => {
13    input.addEventListener("input", changeHandle);
14  });
15})();

6. 參考資料

https://ithelp.ithome.com.tw/articles/10228111 https://pjchender.dev/js30/js30-day03/ https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/input_event