页面未更新并非代码错误，而是css变量未被有效引用或作用域不匹配：变量需通过var(--x)在样式中显式使用，且必须绑定到支持过渡/重绘的原生属性；修改时应操作document.documentelement.style而非body等错误节点，并确保变量名带--前缀、值含单位。
页面没更新，大概率不是代码写错了，而是你改了变量，但没人用它——CSS变量本身不直接控制样式，它只是个“值容器”，必须被var(--x)引用，且引用它的那个属性得支持过渡或重绘。
作用域错配：改了变量，但没改对地方
最常见的情况是：你在:root里定义了--color，却去调用document.body.style.setProperty('--color', 'red')。这不会影响:root下的变量，因为body.style只管body自己的内联样式，跟:root无关。
- 想改全站变量 → 用
document.documentElement.style.setProperty('--color', 'red') - 只改某个组件 → 先
const el = document.querySelector('.card')，再el.style.setProperty('--bg', 'blue') - 检查 DevTools 的 “Computed” 面板，看
var(--color)最终解析成什么值，比 JS 读取更可靠
变量名漏了--前缀或值没带单位
setProperty对格式极其敏感：少一个横线、多一个空格、值没单位，都会静默失败（不报错，但无效）。
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 写成
'color'或'--color'少一个-→ 失败 - 写成
root.style.setProperty('--size', 16)→ 浏览器转成"16"，但var(--size)被用在font-size时，"16"不是合法值，会 fallback 到默认 - 正确写法必须是
root.style.setProperty('--size', '16px')或'1.2rem'
刚设完就读，结果还是旧值
setProperty是同步写入 style 对象，但依赖它的var(--x)计算要等下一帧才完成。所以getComputedStyle().getPropertyValue('--x')立刻调，大概率拿到旧值。
- 别在
setProperty后立刻做逻辑判断，比如if (getComputedStyle(root).getPropertyValue('--theme') === 'dark') - 真要确认生效，包一层
requestAnimationFrame：root.style.setProperty('--val', 'new');<br>requestAnimationFrame(() => {<br> console.log(getComputedStyle(root).getPropertyValue('--val'));<br>});
动画不动？变量本身不触发重绘
CSS 变量不是动画属性。你改了--scale，但transform: scale(var(--scale))没声明transition，或者transform本身不支持过渡（比如某些老浏览器），那就不会动。
- 确保变量绑定到支持过渡的原生属性上，如
color、opacity、transform、background-color - 显式写
transition: transform 0.3s，不能只靠变量变就自动过渡 - 高频更新（如拖拽）务必节流，否则掉帧；批量更新优先用
cssText合并写入，而不是多次setProperty
真正卡住的地方往往不是语法，而是“变量改了→谁在用它→用了之后是否触发重绘→重绘是否被浏览器优化掉了”。调试时先盯 Computed 面板，再查 transition 和作用域，比反复改 JS 更快。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
