Js challenge day 3

Update CSS Variables with JS

 

Code

  <script>
    const inputs = document.querySelectorAll('.controls input');
    const handleEvent = (e) => {
      const suffix = e.target.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${e.target.name}`, e.target.value + suffix);
    }
    // function handleEvent() {
    //   const suffix = this.dataset.sizing || '';
    //   document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    // }
    inputs.forEach(input => input.addEventListener('change', handleEvent));
    inputs.forEach(input => input.addEventListener('mousemove', handleEvent));
  </script>

 

배운점 & 느낀점

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

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

해당 코드처럼 css에서도 변수를 통해 관리할 수 있는 것을 다시 한번 상기하는 계기가 되었습니다.

또한, 이 변수들을 js를 이용해 관리할 수 있는 방법도 배웠습니다.(documentElement.style.setProperty)