<p>直接改--percent变量即可更新进度条，但必须通过element.style.setProperty('--percent', 65)在目标元素上设置，且CSS中需用width: calc(var(--percent) * 1%)绑定，不可省略单位或误用var(--percent)%。</p>
直接改 --percent 变量就能更新进度条，但必须确保作用域和时机正确
CSS 变量本身是静态的，JavaScript 修改它不会自动触发重绘——除非你改的是元素上实际生效的变量（比如通过 element.style.setProperty()），且该变量已被用于计算样式（如 width: calc(var(--percent) * 1%);）。常见错误是往 :root 改了变量，但进度条元素没继承或没用到它。
- 优先在进度条容器上设置变量：
progressBar.style.setProperty('--percent', 65);，而不是只改:root - 确保 CSS 中用到了这个变量，例如：
width: calc(var(--percent) * 1%);，不能写成width: var(--percent);（缺少单位） - 如果用了
transition: width 0.3s ease;，记得宽度值必须是可过渡的（百分比、px 等），calc()表达式只要结果合法就支持过渡
style.setProperty() 是最稳妥的 JS 修改方式，别用 setAttribute('style', ...)
用 setAttribute('style', ...) 会覆盖整个内联样式，容易误删其他关键声明（比如 height 或 background）。而 style.setProperty() 只更新指定变量，安全且精准。
- 正确写法：
bar.style.setProperty('--percent', value); - 错误写法：
bar.setAttribute('style', `--percent: ${value}`);（丢失原有 style） - 若需批量设多个变量，连续调用
setProperty()即可，浏览器会合并重排
动态更新时注意数值合法性：CSS 变量不校验类型，但 calc() 会报错
传入非数字（如空字符串、null、'abc'）给 --percent，CSS 不会报错，但 calc(var(--percent) * 1%) 会计算失败，导致宽度回退到初始值（比如 0%）——看起来像“进度条消失了”。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 务必提前过滤：用
Number(value)或parseInt(value, 10)转换，并限定范围Math.min(Math.max(0, num), 100) - 调试技巧：在 DevTools 的 Elements 面板里检查该元素的 Computed 样式，看
width是否显示为calc(NaN%)或invalid value - 不要依赖 CSS 里的
fallback（如var(--percent, 0)）来兜底类型错误，fallback 只在变量未定义时生效，不处理类型异常
兼容性没问题，但 IE 完全不支持，别忘了降级方案
所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+）都支持 CSS 自定义属性 + style.setProperty()。但 IE11 及更早版本完全忽略 var()，连 fallback 都不触发。
立即学习“Java免费学习笔记（深入）”；
- 简单降级：用
bar.style.width = value + '%';直接设 width，绕过 CSS 变量 - 检测是否支持：
if (CSS.supports('property', '--test')) { /* 用变量 */ } else { /* 用内联 width */ } - 注意：即使支持 CSS 变量，
calc()在旧 Safari（var() 的嵌套支持不稳定，建议始终用calc(var(--percent) * 1%)而不是calc(var(--percent)%)
实际更新逻辑很简单：拿到进度值 → 过滤校验 → setProperty() → 浏览器自动重绘。真正卡住人的，往往是变量没作用到目标元素、calc 写错单位、或者忘了 IE 兜底。
