HTMLProgressElement: value-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die value-Eigenschaft der Schnittstelle HTMLProgressElement stellt den aktuellen Fortschritt des <progress>-Elements dar.
Wert
Eine Gleitkommazahl. Wenn kein max-Wert auf der Fortschrittsanzeige gesetzt ist, liegt der Wert zwischen 0,0 und 1,0. Wenn der max-Wert gesetzt ist, liegt der value zwischen 0 und dem max-Wert.
Wenn die value-Eigenschaft nicht auf das HTMLProgressElement-Objekt gesetzt ist, bleibt die Fortschrittsanzeige unbestimmt.
Beispiele
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);
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-progress-value |