JavaScript로 변수 업데이트

JS에서 CSS 변수를 업데이트하는 이유

사용자 지정 속성 값 가져오기

<div class="demo" style="background:#3b82f6;color:#fff;padding:16px;">Reading --primary-color</div>
<p>Value: <span id="output">(reading...)</span></p>
<script>
  const root = document.documentElement;
  const value = getComputedStyle(root)
    .getPropertyValue('--primary-color').trim();
  console.log(value); // '#3b82f6'
  document.getElementById('output').textContent = value;
</script>

사용자 지정 속성 값 설정하기

<div class="card">
  Card body
</div>
<script>
  // Set globally on :root
  document.documentElement.style.setProperty('--primary-color', '#ef4444');

  // Set on a specific element
  document.querySelector('.card').style.setProperty('--card-bg', 'pink');
</script>

사용자 지정 속성 제거하기

<div class="badge">Removing an inline override restores the :root value</div>
<script>
  // Simulate an inline override was set, then removed
  document.documentElement.style.setProperty('--primary-color', 'crimson');
  document.documentElement.style.removeProperty('--primary-color');
  // Now the :root CSS value applies again
</script>

테마 전환기 패턴

<div class="panel">Dark theme applied via data-theme</div>
<script>
  document.body.dataset.theme = 'dark';
</script>

CSS 변수로 진행률 표시줄 만들기

<div class="progress-bar"></div>
<script>
  function setProgress(pct) {
    document.querySelector('.progress-bar')
      .style.setProperty('--progress', pct + '%');
  }
  setProgress(70);
</script>

마우스 위치 추적

<div class="cursor-dot"></div>
<script>
  document.addEventListener('mousemove', e => {
    document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
    document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
  });
</script>

스크롤 기반 변수

<div style="height: 800px; background: linear-gradient(#f8fafc, #cbd5e1);">
  <div class="scroll-fill"></div>
</div>
<script>
  window.addEventListener('scroll', () => {
    const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight);
    document.documentElement.style.setProperty('--scroll', pct);
  });
</script>

localStorage를 사용한 사용자 설정

<button class="theme-toggle" onclick="toggleTheme()">Toggle theme</button>
<div class="content">Themed content</div>
<script>
  // Restore
  const saved = localStorage.getItem('theme') || 'light';
  document.documentElement.dataset.theme = saved;

  // Toggle
  function toggleTheme() {
    const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
    document.documentElement.dataset.theme = next;
    localStorage.setItem('theme', next);
  }
</script>

CSS 애니메이션과 JS 애니메이션 비교

@property를 사용한 타입 지정 속성

<div class="track">
  <div class="bar"></div>
</div>

빠른 확인

복습