这是我参与更文挑战的第5天，活动详情查看： 更文挑战

Playing with CSS Variables and JS

Hi,几天未见，短暂小长假继已经结束，继续开始学习啦，顺嘴一提，假期后的第一天上班真艰难，险些迟到！

言归正传，开始学习！

一、效果展示

同样，每次展示的都是初始化效果（即未填充 JavaScript 代码的静态效果）、原作者的最终效果和我的效果展示。

今天要实现的是，用 JavaScript 和 CSS3 实现在拖动滑块时，同时改变图片的内边距、模糊度、背景颜色，还有一个不容忽视的地方，就是标题结尾的 JS 也要跟随背景色的变化而变化。

1.index-START.html

2.index-FINISHED.html

3.我的最终效果

二、实现

最终代码

<script>
    ;(function(){
        const inputs = document.querySelectorAll('.controls input')

        function changeHandler(){
          //this

          // console.log(this.name,this.value);

          // switch(this.name){
          //   case 'spacing':
          //     document.querySelector('img').style.padding = this.value + 'px'
          //     break;

          //   case 'blur':
          //     document.querySelector('img').style.filter = `blur(${this.value}px)`
          //     break;

          //   case 'base':
          //     document.querySelector('img').style.background = this.value
          //     document.querySelector('.hl').style.color = this.value
          //     break;
          // }
          
          document.documentElement.style.setProperty('--'+this.name, this.value +(this.dataset.sizing || '' ) )

          // const unit = this.dataset.sizing || '' 

          // document.documentElement.style.setProperty('--'+this.name, this.value + unit )

        } 

        inputs.forEach((input)=>{
            input.addEventListener('change',changeHandler)
            input.addEventListener('mousemove',changeHandler)
        })
    })()
  </script>

复制代码

三、总结回顾

1.首先，我们简单分析一下作者的源代码，里边的 input 标签有两个 HTML 预设的属性 type=”range” 和 type=”color”。

2.其次，里边的样式里有个 :root 的伪类，这个用法纯看个人操作习惯，如果觉得这样看起来比较变扭，你可以换成 html ，其产生的效果是一样的。口说无凭，我们代码见真章。

当我点击回车之后，会看到返回的是整个 html 元素里包含的内容。

我们再从另外一个角度来解释一下。

这样的话，基本上解释了这个问题。

3. 再就是这个标题的核心重点了—— CSS变量（CSS Variables）——var(–xxx),这一点在原作者的源代码里也有体现

过程分解

1.首先我们取到所有的 input 标签

const inputs = document.querySelectorAll('.controls input')
复制代码

2.对这些 input 标签添加 change 事件

        function changeHandler(){
          //this

          console.log(this.name,this.value);
        }

        inputs.forEach((input)=>{
            input.addEventListener('change',changeHandler)
        })
复制代码

上边的 打印出来的 this.value 和 this.name 是为了查看这一步操作我们的 change 事件的结果。

3.添加 mousemove 事件，为什么要添加这个事件呢？
不知道大家刚刚操作到这一步的时候有没有发现一个问题，就是 change 事件的结果都是在最后触发的，当你一直在操作的时候，change 事件并不会产生结果，那么，如果我们想要在操作的时候也实时产生结果，那么我们就需要添加一个 mousemove 事件，然后就是这样的效果：

4.接下来就是最终的结果了，以往我们有可能会这样做：

       function changeHandler(){
          //this

          // console.log(this.name,this.value);

          switch(this.name){
            case 'spacing':
              document.querySelector('img').style.padding = this.value + 'px'
              break;

            case 'blur':
              document.querySelector('img').style.filter = `blur(${this.value}px)`
              break;

            case 'base':
              document.querySelector('img').style.background = this.value
              break;
          }
        } 
复制代码

然后看效果：

这样也可以实现这个效果。
但是我在这里漏掉了 Js 颜色的变化，那么我们需要在代码里加上这样一行代码：

     function changeHandler(){
          //this

          // console.log(this.name,this.value);

          switch(this.name){
            case 'spacing':
              document.querySelector('img').style.padding = this.value + 'px'
              break;

            case 'blur':
              document.querySelector('img').style.filter = `blur(${this.value}px)`
              break;

            case 'base':
              document.querySelector('img').style.background = this.value
              
              //加上这一行
              document.querySelector('.hl').style.color = this.value
              break;
          }
        } 
复制代码

我们这样做的话，不是不可以，但是我们现在这个只是有三个，如果我们以后很多个的话，那我们就需要写很多个，这样的操作对于现在来说太傻了，那么我们当然就要换一种写法了：

function changeHandler(){
          //this

          // console.log(this.name,this.value);

          // switch(this.name){
          //   case 'spacing':
          //     document.querySelector('img').style.padding = this.value + 'px'
          //     break;

          //   case 'blur':
          //     document.querySelector('img').style.filter = `blur(${this.value}px)`
          //     break;

          //   case 'base':
          //     document.querySelector('img').style.background = this.value
          //     document.querySelector('.hl').style.color = this.value
          //     break;
          // }
          
          //新的写法
          document.documentElement.style.setProperty('--'+this.name, this.value +(this.dataset.sizing || '' ) )

          // const unit = this.dataset.sizing || '' 

          // document.documentElement.style.setProperty('--'+this.name, this.value + unit )

        } 
复制代码

四、重难点

其实这一章节里边要说到重难点可能就是两个部分了吧

1. 用 JavaScript 改变 CSS 的属性值

在JavaScript 中，除了我上面提到的两种方式之外，还有一种代表根元素的方式，这三种分别为：

document.querySelector('html');

document.querySelector('":root');

document.documentElement
复制代码

那么改变要改变 CSS 全局变量，我使用了 document.documentElement 。

2. 参数处理，dataset 的使用

这里主要用到的是处理有的需要单位后缀 px，有的不需要单位后缀，比如里边的 spacing 和 blur 是需要后缀的，但是 base 部分的颜色切换肯定是不需要单位后缀的，
如果是使用传统的写法，我们可能会这样去写：

document.documentElement.style.setProperty('--'+this.name, this.value + ( this.name === 'base' ? '': 'px') )
复制代码

就是代码后边部分的三目运算符操作，如果是 base 颜色的话，那么我们就不加后缀，如果不是颜色，那么我们就加 px 后缀，这是传统操作方法，但是我们不这样操作。我们用 dataset 去存储后缀，因为在代码里有设置

<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<input type="color" name="base" value="#8aa8af">
复制代码

那么在 JavaScript 中我们可以通过 dataset。sizing 取到后缀的值：

const unit = this.dataset.sizing || ''
复制代码

这样的话，上边的代码我们就可以换成这样去写了：

document.documentElement.style.setProperty('--'+this.name, this.value +(this.dataset.sizing || '' ) )
复制代码

今日份记录分享到此结束了。