<p>直接在进度条元素上调用element.style.setProperty('--progress', 65)，配合CSS中width: calc(var(--progress) * 1%)和transition: width 0.3s ease，即可实现平滑动态更新；切勿改:root或省略单位，且需确保变量作用域正确、值为合法数字。</p>
如何用 style.setProperty 动态更新 CSS 变量控制进度条
直接说结论：CSS 变量本身不触发重排，但通过 style.setProperty 修改元素上的 --progress 类型变量，再配合 transition 和 calc() 计算宽度，就能实现流畅、无需 JS 操控 DOM 尺寸的动态进度条。
关键不在“能不能”，而在“改谁的变量”和“怎么连到 width”。常见错误是把变量写在 :root 里却想让多个进度条各自独立动——那得把变量挂到每个进度条元素自身上。
- 必须在目标元素（如
<div class="progress-bar">）上设置变量，而不是全局:root - JS 只负责调用
element.style.setProperty('--progress', '65')，其余全交给 CSS - CSS 中用
width: calc(var(--progress) * 1%);或width: clamp(0%, var(--progress), 100%);（注意单位兼容性） - 别忘了加
transition: width 0.3s ease;——CSS 变量本身不可过渡，但依赖它的width可以
为什么 setProperty 改了变量但进度条不动
最常踩的坑：变量名拼错、作用域没对上、或者 CSS 里用了不支持的语法。比如写成 var(--progress, 0) 却没给 fallback；或在伪元素里读取父元素设的变量但忘了 inherit。
- 检查浏览器开发者工具 Elements 面板 → Styles 标签页，确认变量是否真实出现在该元素的
style行内样式中 - CSS 中引用必须严格匹配大小写：
--Progress和--progress是两个变量 - 如果用了
calc(var(--progress) * 1px)却没给--progress赋值数字（比如写了'65%'），计算会失败，width 回退到 auto - 确保元素有明确的
max-width或父容器限制宽度，否则width: calc(...%)可能无意义
多个进度条如何各自独立控制
不要用 :root 定义统一变量，也不要用 class 切换不同状态。每个进度条应是独立 DOM 节点，JS 分别对其调用 setProperty。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构示例：
<div class="progress-bar" data-id="upload"></div> <div class="progress-bar" data-id="sync"></div>
- JS 获取后分别操作：
uploadEl.style.setProperty('--progress', '82')、syncEl.style.setProperty('--progress', '47') - CSS 中统一用：
.progress-bar { --progress: 0; width: calc(var(--progress) * 1%); transition: width 0.25s linear; } - 避免用
document.documentElement.style.setProperty——那样所有进度条都会同步变化
IE 不支持？需要降级方案吗
CSS 变量和 style.setProperty 在 IE 中完全不可用。如果你仍需支持 IE11，就别走这条路径。现代项目（Chrome 49+/Firefox 31+/Safari 9.1+）可放心用，但要注意 Safari 旧版对 calc() 里嵌套 var() 的解析有延迟，建议加 will-change: width; 触发优化。
- 不推荐为兼容 IE 写双套逻辑（CSS 变量 + class 切换），维护成本高且失去动态优势
- 如果必须兼容，直接用 JS 设置
element.style.width = progress + '%'更简单可靠 - Safari 13.1 之前版本中，
calc(var(--p) * 1%)可能首次渲染不生效，可初始化时先设一次0再设目标值，触发重计算
真正要注意的是：变量值必须是纯数字（不含单位），而 CSS 中的 calc 必须补上单位参与运算——这个转换关系，JS 和 CSS 两端稍不留神就断链。
