HTMLProgressElement: value 屬性

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

HTMLProgressElement 介面的 value 屬性表示 <progress> 元素的當前進度。

一個浮點數。如果進度條上未設定 max 值,則 value 的範圍在 0.0 到 1.0 之間。如果設定了 max 值,則 value 的範圍在 0max 值之間。

如果 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

瀏覽器相容性