CSS Academy · 课时

使用 JavaScript 更新变量

Q: 「使用 JavaScript 更新变量」这节课中我会学到什么？

使用 style.setProperty() 从 JavaScript 动态更新 CSS 自定义属性。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 style.setProperty() 从 JavaScript 动态更新 CSS 自定义属性。

使用 JavaScript 更新变量 是 CoddyKit 上的免费 CSS Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

为什么要从 JS 更新 CSS 变量

CSS 自定义属性在浏览器中是实时生效的。通过 JavaScript 修改它们后，所有使用该属性的元素都会立即更新——无需切换大量类，即可实现动态主题、实时滑块和由状态驱动的样式。

获取自定义属性值

使用 getComputedStyle() 读取自定义属性值：

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

设置自定义属性值

可以对任意元素使用 style.setProperty() 更新自定义属性：

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

移除自定义属性

使用 style.removeProperty() 移除属性覆盖，使其恢复为 CSS 声明的值：

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

主题切换器模式

经典的主题切换器会替换 data-theme 属性，并在 CSS 中为每个主题定义变量：

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

使用 CSS 变量创建进度条

完全通过由 JavaScript 设置的 CSS 变量驱动进度条的值：

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

跟踪鼠标位置

通过在鼠标移动时更新位置 CSS 变量，可以创建视差效果或跟随光标的效果：

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

滚动驱动的变量

根据滚动位置更新 CSS 变量，以实现与滚动关联的动画（现代 API 处理这类需求更好，但 JS 加变量仍然是一种简单方法）：

<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 保存用户偏好

将选中的主题保存到 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 动画

要实现流畅的动画，请优先使用能够响应自定义属性变化的 CSS 过渡，而不是使用 JS requestAnimationFrame 循环。浏览器会在线程合成器上处理插值。

使用 @property 定义类型化属性

使用 @property 注册变量后，浏览器便可以在过渡期间对其进行插值——未注册的自定义属性无法实现这一点：

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

快速检查

哪个 JavaScript 方法可以修改根元素上的 CSS 自定义属性？

回顾

使用 style.setProperty() 从 JavaScript 更新 CSS 自定义属性。更改会立即传播到所有使用该属性的元素。这种模式可以实现动态主题、动画进度条、光标效果和滚动驱动的动画，而且无需操作类列表，也无需为多个属性修改内联样式字符串。

常见问题解答

「使用 JavaScript 更新变量」课时是免费的吗？

是的 — 「使用 JavaScript 更新变量」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「使用 JavaScript 更新变量」这节课中我会学到什么？

使用 style.setProperty() 从 JavaScript 动态更新 CSS 自定义属性。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 JavaScript 更新变量」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy