到處都是烤肉味和煙火聲...

依照Alex老師的教學

練習用的HTML

<div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="0" data-sizing="px">
    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffe1a8">
</div>
<img src="圖片位置">

這個練習要使用CSS變數，並透過JS動態改變變數的值

    :root {
      --base: #ffc600;  //變數
      --spacing: 10px;  
      --blur: 10px;
    }

    img {
      padding: var(--spacing);  //使用變數
      background: var(--base);
      filter: blur(var(--blur));
    }

先寫出監聽

inputs.forEach(item => {
     item.addEventListener('change', changeHandler); 
	//滑鼠放開時才呈現
  })

寫被監聽的方訊，因為this，此處不能使用箭頭函式，會抓不到資料

function changeHandler() {
       console.log(this.name, this.value); //確認觸發的值
}

增加滑鼠移動時的監聽

inputs.forEach(item => {
  item.addEventListener('change', changeHandler); //滑鼠放開時才呈現
  item.addEventListener('mousemove', changeHandler); //滑鼠移動時即時呈現
    })

接下來要動態改變CSS的值，比較土法煉鋼的寫法是一個一個寫需要改變的值

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('.JS').style.color=this.value;
         break;
     default:
         break;
        }

這裡的寫法是使用

//使用三元運算子 - 條件?成立:不成立
document.documentElement.style.setProperty(`--${this.name}`, this.value + (this.name === 'base' ? '' : 'px'));

範例裡的HTML有設定data-*用來讀取，因此改為由讀取資料修正所需單位就完成了

// 使用讀取資料修正單位
const unit = this.dataset.sizing || ''; //有給單位就抓，否則就是預設的空值
document.documentElement.style.setProperty(`--${this.name}`, this.value + unit);

完整的code

// (function () {
    const inputs = document.querySelectorAll('.controls input'); //選取所有input

    function changeHandler() {
        // console.log(this.name, this.value); //確認觸發的值

        //使用三元運算子 - 條件?成立:不成立
        // document.documentElement.style.setProperty(`--${this.name}`, this.value + (this.name === 'base' ? '' : 'px'));
        
        // 使用讀取資料修正單位
        const unit = this.dataset.sizing || ''; //有給單位就抓，否則就是預設的空值
        document.documentElement.style.setProperty(`--${this.name}`, this.value + unit);
    }


    inputs.forEach(item => {
        item.addEventListener('change', changeHandler); 
        //滑鼠放開時才呈現
        item.addEventListener('mousemove', changeHandler); 
        //滑鼠移動時即時呈現
        //如果只有mousemove，遇到color類需要點選的會有問題，但沒有做到需要點選的可以只用mousemove
    })
// })();

連結