JavaScript 30 Day -- 03 CSS Variables

實現效果：

    用 JavaScript 和 CSS3 實現拖動滑塊時，實時調整圖片的內邊距、模糊度、背景顏色，同時標題中 JS 兩字的顏色也隨圖片背景顏色而變化。

css

   *{
      margin: 0;
      padding: 0;
    }
    :root{
      /*--color: #000;*/
      --spacing:10px;
      --blur:10px;
      --base:red;
    }
    body {
      text-align: center;
    }

    body {
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 50px;
      color: var(--color);
    }

    .controls {
      margin-bottom: 50px;
    }

    input {
      width:100px;
    }

    img{
      padding:var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

html

 <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input type="color" name="base" value="#ffc600">
  </div>

  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

javascript

// var a = document.getElementById(elementId)
    var inp = document.querySelectorAll("input");
    inp.forEach(function(e){
      e.addEventListener("change",imgChange);
    });
    inp.forEach(function(e){
      e.addEventListener("mousemove",imgChange);
    });
    function imgChange(){
      var dataS = this.dataset.sizing || '';
      // console.log(dataS);
      // console.log(this.name);
      // console.log(this.value);
      document.documentElement.style.setProperty(`--${this.name}`,this.value + dataS);
    }