CSS变量需用getComputedStyle().getPropertyValue()读取、style.setProperty()修改，仅作用于内联样式或计算后样式，遵循级联与继承规则，未定义时返回空字符串。
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 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“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显式提取
真正容易卡住的地方是：你以为改了 :root 就全局生效，结果发现某组件用了 !important 写死颜色，或者用了 CSS-in-JS 库绕过了 CSS 变量机制——这时候变量本身没问题，是渲染链路被截断了。
