HTMLProgressElement：value 属性

基线 广泛可用

此功能已十分成熟，并在多种设备和浏览器版本中有效。它已在浏览器中可用，自 2015 年 7 月.

**value** 属性 HTMLProgressElement 接口表示 <progress> 元素的当前进度。

值

一个浮点数。如果 max 值未在进度条上设置，则值范围在 0.0 到 1.0 之间。如果设置了 max 值，则 value 范围在 0 到 max 值之间。

如果未在 HTMLProgressElement 对象上设置 value 属性，则进度条保持不确定状态。

示例

HTML

html
Determinate Progress bar: <progress id="pBar"></progress> <span>0</span>%
<br />
Indeterminate Progress bar: <progress></progress>

JavaScript

js
const pBar = document.getElementById("pBar");
const span = document.getElementsByTagName("span")[0];

pBar.max = 100;
pBar.value = 0;

setInterval(() => {
  pBar.value = pBar.value < pBar.max ? pBar.value + 1 : 0;

  span.textContent = Math.trunc(pBar.position * 100);
}, 100);

规范

规范
HTML 标准
# dom-progress-value

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。