实现效果

滑动滑块，可以改变图片 padding 大小和图片的模糊度，选择颜色，可以修改图片背景颜色和 "JS" 文字颜色

技术分析

• 滑块移动改变 padding 和模糊度（监听 mousemove 事件修改 style 样式）

• 选择颜色改变背景颜色和文字颜色（监听 change 事件修改 style 样式）

实现步骤

1. 获取对应的 input 元素并添加 change 和 mousemove 事件

从本文开始，事件监听我将用箭头函数的形式进行编写

◼ 获取对应的 input 的元素并对 change 和 mousemove 事件进行监听

    ◻ 为什么要监听两个事件呢？因为我们要使用 mousemove 事件来监听滑块的改变，change事件来监听颜色的改变，只使用一个事件是无法监听两个操作的

◼ 设置一个 changeHandler 函数来打印一下结果

    ◻ 此时我们可以看到控制台打印出对应的信息（name 和 value）

    ◻ 我们此时已经获得了想要改变的值 value

    ◻ 将 value 值赋值给对应的 style 就可以实现想要的效果了

2. 修改对应样式

◼ 这里修改样式有两种做法，这里我将两种做法都介绍给大家，一种是利用switch按条件更改样式，一种是利用CSS变量来更改样式（视频中的做法）

利用switch按条件更改样式

◼ 根据 input 的 name 属性判断我们操作了哪一个 input 元素，然后进行样式的修改

利用CSS变量来更改样式

◼ 我们先添加如下图所示的 css 变量

:root 其实就代表的是 html

CSS变量在使用时需要先声明（--开头），然后使用的时候要使用 var() 来进行包裹，只有后代元素可以使用声明的 CSS 变量，这就是为什么我们总把 CSS 变量写在 :root 选择器中

◼ 现在我们的 img 元素已经使用了对应的CSS变量，那我们是不是可以用 js 改变这些变量，来达到刚才的效果呢？

    ◻ 答案是可以

    ◻ 刚刚我们已经提到过 :root 就是 html

    ◻ 我们获取 html 然后改变它拥有的这些变量就可以了

◼ 我们刚刚尝试直接用 style 来改变 CSS 变量，但是可惜我们不能通过这种方式直接更改，我们需要使用setProperty 来设置 CSS 变量的值

◻ 尝试一下可以修改

◼ 接下来我们按照对应的条件来，更改 CSS变量

◻ 通过 setProperty 来修改对应的属性，通过this.name 来判断添加的后缀是什么

◻ Bos 给我们了一个自定义属性，我们可以通过这个自定义属性加短路运算来判断应该添加的后缀是什么

自定义属性可以通过 dateset 获取， 逻辑或 | | 遇到真值则返回当前值

页面修改

◼ 芜湖，我们又完成了一个项目，下面发挥自己的想象来做一些样式修改吧，这里我给出我的样式修改

• 整体文字变小，防止页面溢出

下面是全部代码