如何在JavaScript中动态读取和修改CSS变量？-css教程-PHP中文网

CSS变量需用getComputedStyle().getPropertyValue()读取、style.setProperty()修改，仅作用于内联样式或计算后样式，遵循级联与继承规则，未定义时返回空字符串。

如何在javascript中动态读取和修改css变量？

CSS 变量（Custom Properties）能被 JavaScript 动态读取和修改，但必须通过 getComputedStyle 和 style.setProperty 配合使用，直接访问 style 对象或用 getAttribute 读不到全局定义的变量值。

读取 CSS 变量要用 `getComputedStyle` + `getPropertyValue`

你不能用 element.style 拿到在 :root 或其他选择器里定义的 CSS 变量值——它只返回内联样式中显式设置的属性。必须借助计算后的样式对象：

getComputedStyle(document.documentElement) 读 :root 下的变量（最常用）
getComputedStyle(element) 读该元素最终生效的变量值（含继承、级联结果）
getPropertyValue('--primary-color') 返回字符串，注意开头两个短横线不能省略
如果变量未定义，getPropertyValue 返回空字符串，不是 undefined 或 null

示例：

const root = document.documentElement;<br>const color = getComputedStyle(root).getPropertyValue('--primary-color').trim(); // 注意 trim() 去首尾空格

修改 CSS 变量必须用 `style.setProperty`，不能用 `style.cssText` 或点语法

给 element.style 直接赋值 element.style['--my-var'] = 'red' 在部分旧版 Safari 中不生效；用 cssText 会覆盖整个内联样式，极不安全。

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

始终用 element.style.setProperty('--var-name', 'value')
修改 :root 变量就写 document.documentElement.style.setProperty(...)
值必须是字符串，数字要转成 String(num) 或模板字面量 ${num}px
修改后，所有引用该变量的元素样式会自动重绘，无需手动触发

示例：

document.documentElement.style.setProperty('--accent', '#ff6b6b');

批量读写时注意作用域和继承链

CSS 变量遵循 CSS 作用域规则：子元素能继承父元素设置的变量，但无法反向影响父级。动态修改时容易误判“为什么没变”：

在某个 div 上设 --text-size: 18px，其子元素用 font-size: var(--text-size) 才会生效
用 getComputedStyle(child) 能读到继承来的值；用 getComputedStyle(parent) 则读不到子元素设置的变量
若多个地方设置了同一变量（如 :root 和某个组件 class），getComputedStyle 返回的是最终级联生效的那个
调试时可用 console.log(getComputedStyle(el)) 查看所有计算后变量，但它们不会出现在 style 列表里，得靠 getPropertyValue 显式提取