JavaScript中的CSS自定义属性（变量）如何动态管理？

JavaScript中可通过getComputedStyle()获取和setProperty()设置CSS自定义属性（变量），实现动态管理，常用于主题切换、响应式设计等场景。 以下是具体方法与示例：

• 定义方式：在CSS中以--开头声明变量，通常定义在:root（全局）或特定元素中。:root { --primary-color: #007bff; --font-size: 16px;}
• 使用方式：通过var(--variable-name)引用变量。body { color: var(--primary-color); font-size: var(--font-size);}

使用getComputedStyle()获取元素计算后的样式，再通过getPropertyValue()提取变量值。

• 步骤：

  选择目标元素（如document.documentElement获取根元素）。

  调用getComputedStyle()获取计算样式对象。

  使用getPropertyValue('--variable-name')读取变量值。

• 示例：const root = getComputedStyle(document.documentElement);const primaryColor = root.getPropertyValue('--primary-color').trim();console.log(primaryColor); // 输出: #007bff
• 注意：

  需添加.trim()去除可能存在的空白字符。

  适用于全局或局部定义的变量，但需确保元素已渲染（如放在DOMContentLoaded事件中）。

通过元素的style.setProperty()方法修改变量，立即生效且所有引用处自动更新。

• 语法：element.style.setProperty('--variable-name', 'value');
• 示例：// 修改全局变量document.documentElement.style.setProperty('--primary-color', '#ff5733');// 修改局部变量（如body元素）document.body.style.setProperty('--font-size', '18px');
• 优势：

  无需手动更新所有使用该变量的CSS规则，浏览器自动重新计算样式。

  适合动态场景（如用户交互、屏幕尺寸变化）。

通过切换自定义属性集实现深色/浅色模式，无需重复定义大量CSS规则。

• 步骤：

  在CSS中定义两组变量，通过属性选择器（如[data-theme="dark"]）区分。

  使用JavaScript切换data-theme属性值。

• 示例：:root { --bg-color: #fff; --text-color: #333;}[data-theme="dark"] { --bg-color: #1a1a1a; --text-color: #f1f1f1;}body { background: var(--bg-color); color: var(--text-color);}function setTheme(theme) { if (theme === 'dark') { document.documentElement.setAttribute('data-theme', 'dark'); } else { document.documentElement.removeAttribute('data-theme'); }}

根据屏幕尺寸动态调整基础字号，结合resize事件或CSS媒体查询。

• 示例：:root { --font-size: 16px;}body { font-size: var(--font-size);}function updateFontSize() { const screenWidth = window.innerWidth; const baseSize = screenWidth < 768 ? '14px' : '16px'; document.documentElement.style.setProperty('--font-size', baseSize);}window.addEventListener('resize', updateFontSize);updateFontSize(); // 初始化

通过localStorage记住用户选择的主题或设置，页面加载时重新应用。

• 示例：// 保存主题function saveTheme(theme) { localStorage.setItem('userTheme', theme); setTheme(theme);}// 加载主题document.addEventListener('DOMContentLoaded', () => { const savedTheme = localStorage.getItem('userTheme'); if (savedTheme) setTheme(savedTheme);});

• 作用域：变量作用域由定义位置决定，:root为全局，特定元素内为局部。
• 继承性：子元素可继承父元素的变量值，但局部变量优先级更高。
• 默认值：var()支持设置默认值（如var(--undefined-var, #default)），避免变量未定义时的样式错误。
• 性能：频繁操作DOM可能引发重排，建议批量更新或使用requestAnimationFrame优化。

通过合理利用CSS自定义属性与JavaScript，可实现高效、可维护的动态样式管理，显著提升开发效率与用户体验。