實現(xiàn)效果

滑動滑塊，可以改變圖片 padding 大小和圖片的模糊度，選擇顏色，可以修改圖片背景顏色和 "JS" 文字顏色

技術(shù)分析

• 滑塊移動改變 padding 和模糊度（監(jiān)聽 mousemove 事件修改 style 樣式）

• 選擇顏色改變背景顏色和文字顏色（監(jiān)聽 change 事件修改 style 樣式）

實現(xiàn)步驟

1. 獲取對應(yīng)的 input 元素并添加 change 和 mousemove 事件

從本文開始，事件監(jiān)聽我將用箭頭函數(shù)的形式進行編寫

? 獲取對應(yīng)的 input 的元素并對 change 和 mousemove 事件進行監(jiān)聽

????? 為什么要監(jiān)聽兩個事件呢？因為我們要使用 mousemove 事件來監(jiān)聽滑塊的改變，change事件來監(jiān)聽顏色的改變，只使用一個事件是無法監(jiān)聽兩個操作的

? 設(shè)置一個 changeHandler 函數(shù)來打印一下結(jié)果

????? 此時我們可以看到控制臺打印出對應(yīng)的信息（name 和 value）

????? 我們此時已經(jīng)獲得了想要改變的值 value

????? 將 value 值賦值給對應(yīng)的 style 就可以實現(xiàn)想要的效果了

2. 修改對應(yīng)樣式

? 這里修改樣式有兩種做法，這里我將兩種做法都介紹給大家，一種是利用switch按條件更改樣式，一種是利用CSS變量來更改樣式（視頻中的做法）

利用switch按條件更改樣式

? 根據(jù) input 的 name 屬性判斷我們操作了哪一個 input 元素，然后進行樣式的修改

利用CSS變量來更改樣式

? 我們先添加如下圖所示的 css 變量

:root 其實就代表的是 html

CSS變量在使用時需要先聲明（--開頭），然后使用的時候要使用 var() 來進行包裹，只有后代元素可以使用聲明的 CSS 變量，這就是為什么我們總把 CSS 變量寫在 :root 選擇器中

? 現(xiàn)在我們的 img 元素已經(jīng)使用了對應(yīng)的CSS變量，那我們是不是可以用 js 改變這些變量，來達到剛才的效果呢？

????? 答案是可以

????? 剛剛我們已經(jīng)提到過 :root 就是 html

????? 我們獲取 html 然后改變它擁有的這些變量就可以了

? 我們剛剛嘗試直接用 style 來改變 CSS 變量，但是可惜我們不能通過這種方式直接更改，我們需要使用setProperty 來設(shè)置 CSS 變量的值

? 嘗試一下可以修改

? 接下來我們按照對應(yīng)的條件來，更改 CSS變量

? 通過 setProperty 來修改對應(yīng)的屬性，通過this.name 來判斷添加的后綴是什么

? Bos 給我們了一個自定義屬性，我們可以通過這個自定義屬性加短路運算來判斷應(yīng)該添加的后綴是什么

自定義屬性可以通過 dateset 獲取， 邏輯或 | | 遇到真值則返回當前值

頁面修改

? 蕪湖，我們又完成了一個項目，下面發(fā)揮自己的想象來做一些樣式修改吧，這里我給出我的樣式修改

• 整體文字變小，防止頁面溢出

下面是全部代碼