Day 03 CSS Variables With JS

效果

首先是效果图，用户可以通过控制上面三个input改变图片的padding、blur、background-color属性;

image.png

image.png

实现方式

方式1

通过switch 获取改变样式种类分别改变

    // 方式1
     switch (this.id) {
      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;
      }

方式2

通过三元运算符对样式种类进行判断后改变

// 方式2
document.querySelector("img").style.setProperty(`--${this.id}`, this.value + (this.id === 'base' ? '' : 'px'));

方式3

通过div定义的data属性对样式种类进行判断后改变，当种类单位多样时，这种比较好，此例中只有px和无两种单位。

 // 方式3
 const suffix = this.dataset.sizing || '';
 document.querySelector("img").style.setProperty(`--${this.id}`, this.value + suffix);

注意点

因为样式改变按钮有两种形式，一是background-color样式，选择之后改变 用change即可；二是range形式，需要通过边滑动边改变，需要使用mousemove，所以需要两个addEventListener。

          inputs.forEach(input => {
                input.addEventListener("change", changeHandle);
                input.addEventListener("mousemove",changeHandle)
            })

完整代码

    
    

    


    
Update CSS Variables with  JS
    

        Spacing:
        

        Blur:
        

        Color: