编辑“︁CSS变量动态更新”︁

{{DISPLAYTITLE:CSS变量动态更新}}

'''CSS变量动态更新'''（Dynamic Updates of CSS Variables）是指通过JavaScript或用户交互实时修改CSS自定义属性（CSS变量）的值，从而动态改变页面样式的一种技术。CSS变量（也称为CSS自定义属性）通过`--`前缀定义，而动态更新则允许开发者在运行时灵活调整这些值，实现主题切换、响应式设计、动画效果等高级功能。

== 基本概念 ==
CSS变量使用`--variable-name`语法定义，并通过`var()`函数调用。动态更新则通过JavaScript访问和修改这些变量值。例如：

<syntaxhighlight lang="css">
:root {
  --primary-color: #3498db;
  --spacing-unit: 16px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
}
</syntaxhighlight>

通过JavaScript修改`:root`上的变量值，所有使用该变量的元素样式会自动更新：

<syntaxhighlight lang="javascript">
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
</syntaxhighlight>

== 动态更新的实现方式 ==
=== 1. 通过JavaScript直接修改 ===
JavaScript可以通过`style.setProperty()`方法更新CSS变量：

<syntaxhighlight lang="javascript">
// 获取根元素（通常是:root）
const root = document.documentElement;

// 更新变量
root.style.setProperty('--primary-color', 'purple');

// 读取变量（需通过getComputedStyle）
const styles = getComputedStyle(root);
console.log(styles.getPropertyValue('--primary-color')); // 输出: purple
</syntaxhighlight>

=== 2. 响应式更新 ===
结合事件监听器实现用户交互驱动的动态更新：

<syntaxhighlight lang="html">
<input type="color" id="colorPicker" value="#3498db">
</syntaxhighlight>

<syntaxhighlight lang="javascript">
document.getElementById('colorPicker').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--primary-color', e.target.value);
});
</syntaxhighlight>

== 实际应用案例 ==
=== 案例1：主题切换 ===
通过动态更新CSS变量实现深色/浅色模式切换：

<syntaxhighlight lang="css">
:root {
  --bg-color: white;
  --text-color: black;
}

[data-theme="dark"] {
  --bg-color: #222;
  --text-color: #eee;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
const toggleBtn = document.getElementById('theme-toggle');
toggleBtn.addEventListener('click', () => {
  document.documentElement.toggleAttribute('data-theme');
});
</syntaxhighlight>

=== 案例2：动态布局调整 ===
通过滑块控制页面间距：

<syntaxhighlight lang="html">
<input type="range" id="spacingSlider" min="8" max="32" value="16">
</syntaxhighlight>

<syntaxhighlight lang="javascript">
document.getElementById('spacingSlider').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--spacing-unit', `${e.target.value}px`);
});
</syntaxhighlight>

== 高级技巧 ==
=== 在SVG中使用动态变量 ===
CSS变量可以动态控制SVG属性：

<syntaxhighlight lang="html">
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" style="fill: var(--circle-fill, red)"/>
</svg>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// 动态更新SVG颜色
document.documentElement.style.setProperty('--circle-fill', 'blue');
</syntaxhighlight>

=== 数学计算与变量结合 ===
通过`calc()`实现基于变量的动态计算：

<syntaxhighlight lang="css">
:root {
  --base-size: 16px;
}

.text {
  font-size: calc(var(--base-size) * 1.5);
}
</syntaxhighlight>

== 性能考虑 ==
动态更新CSS变量相比直接修改元素的`style`属性性能更优，因为：
* 浏览器只需重新计算样式一次（而非逐个元素修改）
* 适合批量更新多个元素的统一属性
* 触发重绘而非回流的情况更多

== 浏览器兼容性 ==
CSS变量动态更新在现代浏览器中得到全面支持：
{| class="wikitable"
|+ 兼容性表
! 浏览器
! 支持版本
|-
| Chrome
| 49+
|-
| Firefox
| 31+
|-
| Safari
| 9.1+
|-
| Edge
| 15+
|-
| Opera
| 36+
|}

== 总结 ==
CSS变量动态更新技术为Web开发提供了强大的样式控制能力，允许：
* 创建可主题化的界面
* 实现用户自定义的UI
* 构建响应式交互效果
* 减少重复的CSS代码

通过结合JavaScript的事件系统，开发者可以创建高度动态且可定制的用户体验。

== 参见 ==
* [[CSS自定义属性]]
* [[响应式Web设计]]
* [[JavaScript DOM操作]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS自定义属性]]