Css Javascript

JAVASCRIPT

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
  const suffix = this.dataset.sizing || ''; // || 을 넣는이유는 data-sizing값이 같은경우 없기때문에 넣어줌 없을때는 공백처리되게 해줌 
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); 
  // css 속성을 재할당 시킴 (IE8 이하는 setaAttribute를 써야함)
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

HTML

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

  <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="10" data-sizing="px">
    <label for="textSize" class="opt-title">Font size</label>
    <input type="range" name="textSize" min="20" max="78" value="14" data-sizing="px" />
    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>
     <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

CSS

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

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

    .hl {
      color: var(--base);
      font-size:var(--textSize);
    }

    /*
      misc styles, nothing to do with CSS variables
    */

    body {
      text-align: center;
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 50px;
    }
    .controls {
      margin-bottom: 50px;
    }

    input {
      width: 100px;
    }

:root

:root는 가상 선택자이기 때문에, html 셀렉터보다도 우선순위가 높습니다. 그래서 :root와 html에 대한 스타일을 동시에 선언하면, :root에 대한 스타일이 우선됩니다.

root는 전역 스코프의 CSS 변수(사용자 정의 CSS속성)를 선언할 때 사용