# [JS30] Day3. CSS Variables ###### tags: `JS30` ## 任務 Task 做出可以設定 `blur`、`spacing` 的控制條以及改變背景顏色的控制器，使用 `CSS Variables` 做使用。 ==完成時間：1hr== ## 步驟 Step 1. 先設定 `CSS Variables` 設定全域通用 `CSS` 變數並套用在 `img` 的樣式。 2. 建立 `input` 的 `NodeList` 用 `forEach` 個別監測是否有==改變==及==鼠標移動==。 3. 改變後建一個 `handleUpdate` 函式設定改變後（用 `this` 去抓 `input` 的 `value`）的全域樣式。 ## 筆記 Note ### CSS :root * 可翻作根目錄選取器，根指的是 `<html>`，幾乎都是搭配 `CSS variables` 來作使用。 * 建立變數的方式為 `--variables: 20px`。 * 變數可建立在==全域== `:root` 及==區域== `.item（該物件的選去器）`　裡面。 * 使用方式為在屬性值使用 `var（--variables）`。 ### JS addEventListener（"change"） * 常用在 `input` 表單監測。 * 作用於焦點離開數入框後才觸發。 ### JS document.documentElement * `document.documentElement` 會回傳目前文件中的根元素，例如 `HTML` 文件的根元素就是 `<html>`。 ### JS style.setProperty * 語法： `style.setProperty（propertyName,value）`。 * 幫對象的 `style` 新增屬性。 ## 遇到問題 Problem :::danger ⚠️ <font color=black>Problem</font> ::: 調色盤在滑動選取顏色時，背景顏色不會改變 :::info :ok_hand: <font color=black>Revise</font> ::: 只有 `safari` 的調色盤可以。 後來發現使用監聽 `input` 就解決問題了！ ## 想法 Idea :::warning :bulb: <font color=black>做一個 `rgba` 的調色盤 </font> ::: ### 方法 method * 一樣用 `CSS variables` 的方法，分別設四個 `variable` （rgba）。 * 監聽 `input` 的 `value` 再更改背景顏色。 * 添加顏色的數值，並用 `padStart(3,"0")` 補齊零。 * 調整控制條的顏色樣式，用的是偽類`::--wekbit` 。 * 根據 `rgba` 去改變 `range` 顏色，但是因為使用了偽類，需要使用 `addRule()` 或 `insertRule()` 去新增樣式，才能使偽類改變樣式。 <iframe height="300" style="width: 100%;" scrolling="no" title="Palette" src="https://codepen.io/jim876633/embed/bGLmdQe?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/jim876633/pen/bGLmdQe"> Palette</a> by Jim (<a href="https://codepen.io/jim876633">@jim876633</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## 連結 [range（CSS樣式）](https://medium.com/mo-learning/%E4%BF%AE%E6%94%B9-input-type-range-%E4%B9%8B-css-%E6%A8%A3%E5%BC%8F-ab57cd95cd65) [insertRule()](https://tw511.com/a/01/2627.html)