實現效果
用 JavaScript 和 CSS3 實現拖動滑塊時，實時調整圖片的內邊距、模糊度、背景顏色，同時標題中 JS 兩字的顏色也隨圖片背景顏色而變化。
涉及特性
:root-
var(--xxx)：CSS 變量（CSS Variables） filter: blur()- 事件
change、mousemove
過程指南
CSS 部分準備
- 聲明全局（
:root）的 CSS 變量 - 將變量應用到頁面中對應元素
<img> - 處理標題的 CSS 值
JS 實時更新 CSS 值
- 獲取頁面中
input元素 - 給每個
input添加監聽事件，使其在值變動，觸發更新操作 - 同 2 ，添加鼠標滑過是的事件監聽
- 編寫處理更新操作的方法
- 獲取參數值后綴
- 獲取參數名（blur、spacing、color）
- 獲取參數值（12px、#efefef）
- 賦值給對應的 CSS 變量
基礎知識
NodeList 和 Array 的區別
可以打開 proto 查看它的方法，其中有forEach()、item()、keys()等。而 Array 的 prototype 中有map()、pop()等數組才有的方法。HTML5 中的自定義數據屬性
dataset
HTML5 中可以為元素添加非標準的自定義屬性，只需要加上data-前綴，可以隨便添加和命名。添加之后，可以通過元素的dataset屬性來訪問這些值，dataset的值是 DOMStringMap 的一個實例化對象，其中包含之前所設定的自定義屬性的“名-值”對。CSS variable
這是一個 CSS3 的新特性，IE 和 Edge 目前都還不支持。命名寫法是--變量名，在引用這個變量時寫法是var(--變量名)。具體實例見下一條代碼。-
:root偽類
這個偽元素匹配的是文檔的根元素，也就是<html>標簽。所以常用于聲明全局的 CSS 變量：
:root { --base: #ffc600; --blur: 10px; --padding: 10px; }在使用時：
img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); } CSS 濾鏡 filter
CSS 的濾鏡提供了一些圖形特效，比如高斯模糊、銳化、變色等。它帶有一些預設的函數，在使用時加上參數調用這些函數即可。在 Chrome、Firefox 中都支持。
解決難點
-
如何處理參數值（一個有 px 、另一個沒有）
運用dataset儲存后綴，有 px 后綴的標簽中設置<input data-sizing: px>：<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px"> <input type="color" name="base" value="#8aa8af">JS 中通過
dataset.sizing來獲取后綴值：const suffix = this.dataset.sizing || '';此時
suffix獲取到的值，針對顏色為空，而針對長度類的則為 'px'。 -
如何用 JavaScript 改變 CSS 屬性值？
在 JavaScript 中document.documentElement即代表文檔根元素。所以要改變全局的 CSS 變量，可以這樣寫：document.documentElement.style.setProperty('--base', '#fff');
系列目錄
JavaScript30 - 三十天純JS挑戰 中文指南
01 JavaScript Dump Kit 中文指南
02 純 JavaScript+CSS 時鐘指南
03 用 CSS 變量實現拖動控制 CSS 參數
