[Javascript] 03. Update CSS Variables with JS

winCow 2021. 4. 14. 19:50

1. 배경

:root로 CSS의 변수를 선언하고, 자바 스크립트를 통해 이미지의 spacing, blur, base color를 웹페이지에서 업데이트 할 수 있도록 만들어 볼 것이다.

2. HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scoped CSS Variables and JS</title>
</head>
<body>
  <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="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>

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

3. CSS

    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;
    }

HTML과 CSS는 위와 같이 주어져 있다.

    :root {
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
    }

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

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

:root를 통해 CSS의 변수 base, spacing, blur을 설정했다. 이를 통해 이미지를 액자처럼 보이도록 배경에 색깔과 스페이싱을 주었고, 블러 처리를 했다.

4. Javascript

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

    function handleUpdate() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }

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

먼저 range, color 형태로 주어진 input 태그를 선택했다. querySelectorAll로 선택하였으므로 이 값들은 Nodelist로 반환되고, forEach를 사용할 수 있다. 각각의 input에 대하여, change되거나 mousemove될 때 handleUpdate 함수를 시행하도록 이벤트 리스너를 걸어서 메인 시스템을 시행하도록 한다.

this는 호출 시점에서, 실행하는 함수가 가리키는 객체를 의미한다. 이를테면 위 코드에서는, #blur인 input 태그가 변경되었다면 #blur인 input 태그를, #spacing인 input 태그가 변경되었다면 #spacing인 input 태그가 this가 된다. 즉, suffix는 이벤트 리스너를 통해서 전달 받은 input 태그의 dataset 속성에 대한 값, px 혹은 아무것도 없는 값을 가진다. 또한, handleUpdate 함수에서, document.documentElement는 문서의 루트 엘리먼트, 즉 <html>을 반환한다. 이 html 태그에 style.setProperty(propertyName, value) 형태로 새로운 property 값을 설정한다. 이 setProperty는 html의 속성, 즉 CSS의 root의 속성을 변경하며, this 역시 suffix를 정의할 때와 같은 객체(태그)를 가리키므로, 해당 태그의 이름(propertyName)과 값(value)에 단위(suffix)를 입력 받을 수 있고, 이를 통해 새로운 property 값을 반환하며, 사용자가 값을 변경하는대로 CSS의 속성을 변경하여 웹 페이지에 반영되는 것이다.