การอัปเดตตัวแปรด้วย JavaScript

เหตุใดจึงต้องอัปเดตตัวแปร CSS จาก JS

การอ่านค่าคุณสมบัติกำหนดเอง

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

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุปทบทวน