应先清空再设置新类：bar.className = 'progress-bar ' + newClass；需同步更新容器底色、ARIA属性，避免class残留与可访问性问题；阈值判断须包含边界，如 if (val <= 30)。
直接用 JavaScript 控制 .progress-bar 的 className 或 style.backgroundColor 就能动态改色，但必须同步处理容器底色、ARIA 属性和 class 冲突，否则视觉与可访问性都会出问题。
如何用 JS 根据数值切换 bg-* 类
Bootstrap 5 的颜色类（如 bg-success）只对 .progress-bar 元素生效，不能加在 .progress 容器上。动态切换时别用 classList.add() 叠加，容易残留旧类：
- 先清空再设新类：
bar.className = 'progress-bar ' + newClass; - 阈值判断建议包含边界：比如
if (val - 注意 0% 和 100% 极端值——若
val === 0时仍加bg-success，进度条会“空着显绿”，建议统一 fallback 到bg-secondary或透明灰
为什么改了 .progress-bar 颜色，底色还那么灰
进度条的“背景底色”由外层 .progress 容器的 background-color 决定，默认是 #e9ecef（浅灰），不是透明。只动 .progress-bar 不会影响它：
- 给
.progress加自定义类，例如<div class="progress progress-bg-low">，再配 CSS：.progress-bg-low { background-color: #fee; } - 避免用 Bootstrap 的
.bg-light等工具类直接加在.progress上——它们带!important，会覆盖你的规则 - 如果底色也要随数值变（比如低进度时整个条发红），JS 必须同时操作两个元素：
bar.closest('.progress').className = 'progress progress-low';
动态改色时 aria-valuenow 为什么必须同步更新
aria-valuenow 是屏幕阅读器读出的当前值，不是装饰属性。它和 style.width 必须严格一致，否则残障用户听到的数值和看到的长度对不上：
- 每次更新宽度前，先写：
bar.setAttribute('aria-valuenow', val); - 不要依赖 PHP 渲染后就一劳永逸——只要 JS 后续修改了进度，就必须重设该属性
- 如果用 jQuery：
$bar.attr('aria-valuenow', val);比.prop()更稳妥，因它是 HTML 属性而非 DOM 属性
自定义颜色（非 bg-*）怎么写才不被覆盖
想用 #ff6b35 这种品牌色？别硬套 bg-* 类，直接内联或高权重 CSS 更可靠：
- 内联最简单：
<div class="progress-bar" style="background-color: #ff6b35;"> - 或者用更强选择器：
.my-progress .progress-bar { background-color: #ff6b35 !important; } - 切记：CSS 里写
.progress-bar { background-color: ... }会被 Bootstrap 的.bg-*覆盖（后者特异性更高），所以要么不用bg-*，要么确保自定义规则加载在 Bootstrap 之后且带!important
最常漏掉的是底色同步和 aria-valuenow 更新——这两处不修，再漂亮的颜色切换也只是前端“假动作”。
