progress元素的value属性必须用JS直接赋值，即bar.value = 42；setAttribute('value', 42)无效，因仅修改HTML属性不触发重绘，且需确保value在min/max范围内，否则被静默截断。
progress元素的value属性必须用JS直接赋值
HTML <progress> 标签本身是只读展示组件，不能靠表单提交或属性绑定自动更新——它的进度变化完全依赖 JS 对 value 属性的显式赋值。浏览器不会监听 dataset 或自定义属性来驱动渲染，只有 value（且必须在 min/max 范围内）才会实时反映到 UI 上。
常见错误是试图用 setAttribute('value', 60)，这虽然能写入 DOM 属性，但不会触发视觉更新；正确做法是直接操作 JS 属性：
const bar = document.querySelector('progress');
bar.value = 42; // ✅ 触发重绘
// bar.setAttribute('value', 42); ❌ 无效动态更新前必须确认min/max范围
<progress> 的实际显示比例由 value 相对于 min 和 max 决定，默认 min=0、max=100。如果 JS 设置的 value 超出这个范围，浏览器会静默截断（比如设成 120，实际按 100 渲染），但不会报错，容易误判逻辑。
- 务必检查
bar.min和bar.max当前值，尤其当页面初始化时未显式声明min/max - 若后端返回的是 0–1 的浮点数，要换算：
bar.value = Math.round(data.progress * bar.max) - 避免在循环中频繁赋值（如每 10ms 更新一次），可能引发卡顿；建议节流或使用
requestAnimationFrame
用addEventListener监听value变化？不行
<progress> 不支持 change 或 input 事件——它不是用户可交互控件（不像 <input type="range">）。想响应进度变化，只能主动触发，比如：
立即学习“前端免费学习笔记（深入）”；
- 在 AJAX 请求的
onprogress回调里更新value - 在定时器或 Promise 链中手动推进
value - 若需“进度完成”逻辑，应靠业务状态判断，而非监听 progress 元素自身
例如上传时：
xhr.upload.addEventListener('progress', e => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
progressEl.value = Math.min(progressEl.max, percent); // 防越界
}
});兼容性与无障碍注意事项
IE10+ 支持 <progress>，但老版本 Safari 对 CSS 自定义样式支持弱；更重要的是，仅靠视觉进度条对屏幕阅读器不友好。
- 必须设置
aria-valuenow、aria-valuemin、aria-valuemax，且三者需与 JS 更新的value同步 - 不要仅用颜色表达进度（比如绿色→红色），色盲用户无法识别；可叠加文字提示：
<progress value="75"><span>75% 完成</span></progress> - 某些 Android WebView 会忽略
value小数，建议统一用整数
真正麻烦的从来不是怎么改 value，而是怎么让 value 的每次变化都可靠、可访问、不跳变——尤其在异步链路里漏掉边界检查或 aria 同步，问题往往在线上才暴露。
