progress.value赋值后不更新显示，是因为未显式设置max属性或value超出0–max范围；必须先设bar.max=100再赋bar.value=65，且用数字而非字符串赋值，否则浏览器按默认max=1截断导致满格或空白。
progress.value 赋值后不更新显示？
直接给 progress 元素的 value 属性赋值（比如 el.value = 42）是有效的，但前提是该元素已设置 max 属性，且新值在 0 到 max 范围内。如果没设 max，浏览器会按默认值 1 处理，此时 value="42" 实际被截断为 1，进度条永远满格。
-
max必须显式设置，不能依赖默认值做有意义的进度映射 - 赋值时用数字，不是字符串：
el.value = 75✅，el.value = "75"❌（虽能工作但隐式转换易出错） - 若
value小于0或大于max，浏览器会自动 clamp 到合法范围，但逻辑上应由你控制边界
用 JS 更新 value 的典型写法
最常用的是获取元素后直接赋值。注意：不需要调用任何方法，也不需要触发事件——DOM 属性更新即生效。
const bar = document.querySelector('progress');
bar.max = 100;
bar.value = 65; // 进度立刻变为 65%
常见场景如轮询或事件响应：
- 定时更新：
setInterval(() => { bar.value = Math.min(bar.value + 1, bar.max); }, 100) - 表单提交中模拟上传：
bar.value = Math.round(loaded / total * bar.max) - 配合
requestAnimationFrame平滑动画时，仍只需反复赋值value，浏览器自动插值渲染
为什么用 value 而不是 setAttribute？
用 el.setAttribute('value', '65') 看似可行，但它是设置 HTML 属性（attribute），而 progress 的视觉状态由 DOM 属性（property）value 控制。初始加载时两者同步，但后续修改必须走 property 才能实时反映。
-
el.value = 65→ 更新 property → 视觉立即变化 ✅ -
el.setAttribute('value', '65')→ 只改 attribute → 不触发重绘 ❌（除非元素重建） - 检查当前值请读
el.value，不是el.getAttribute('value')
兼容性与隐藏坑
所有现代浏览器都支持 progress.value 的 JS 操作，但有两个容易忽略的点：
- IE 完全不支持
progress元素，需降级方案（如div+ CSS 模拟） - 某些旧版 Safari（≤13.1）在
value从0首次设为非零时，可能延迟一帧才渲染，加一次el.offsetWidth强制重排可绕过 - 如果
progress一开始display: none或在未挂载的 DocumentFragment 中，赋值有效，但直到显示时才渲染——不是 bug，是浏览器渲染机制
真正要小心的不是怎么写，而是忘记设 max、混淆 attribute 和 property、或者在异步回调里忘了先查元素是否存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
