Signatur
Beschreibung
Die Eigenschaft value spiegelt das HTML-Attribut value eines <meter>-Elements wider. Ein <meter> zeigt einen Messwert innerhalb eines bekannten Bereichs an, zum Beispiel die Belegung eines Speichers, die Stärke eines Passworts oder den Akkustand. value ist der Wert, den der Balken gerade anzeigt.
Beim Lesen liefert die Eigenschaft den tatsächlichen Wert (actual value). Fehlt das Attribut oder lässt es sich nicht als Zahl lesen, wird 0 verwendet. Anschließend wird der Wert begrenzt: Liegt er unter min, kommt min zurück, liegt er über max, kommt max zurück. Ohne eigene Angaben gilt min = 0 und max = 1.
Beim Schreiben wird die Zahl als Attribut value ins DOM übernommen. Der Balken wird sofort neu gezeichnet. Seine Farbe (optimal, suboptimal oder kritisch) ergibt sich aus value im Verhältnis zu low, high und optimum.
Nutzen Sie <meter> mit value für Messwerte. Für den Fortschritt einer laufenden Aufgabe, etwa eines Uploads, ist <progress> das passende Element.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $neuerWert | number | Nur beim Setzen: die neue Zahl. Strings werden in Zahlen umgewandelt. Nicht endliche Werte (NaN, Infinity) lösen einen TypeError aus. |
Rückgabewert
min bis max begrenzte Wert als Gleitkommazahl (double). Fehlt das Attribut oder ist es ungültig, wird 0 verwendet, das dann ebenfalls begrenzt wird.Beispiele
Wert lesen und Begrenzung beobachten
// HTML: <meter id="disk" min="0" max="100" value="42"></meter>
const meter = document.querySelector('#disk');
console.log(meter.value);
// Werte außerhalb des Bereichs werden beim Lesen begrenzt
meter.value = 150;
console.log(meter.value);
console.log(meter.getAttribute('value'));Speicherbelegung live anzeigen
// HTML: <meter id="storage" min="0" max="1" low="0.6" high="0.85" optimum="0"></meter>
const meter = document.querySelector('#storage');
const updateStorage = async () => {
if (!navigator.storage?.estimate) return;
const { usage, quota } = await navigator.storage.estimate();
meter.value = usage / quota;
meter.title = `${(meter.value * 100).toFixed(1)} % belegt`;
};
updateStorage();
setInterval(updateStorage, 10_000);Passwortstärke an ein Eingabefeld koppeln
// HTML: <input id="pw" type="password">
// <meter id="strength" min="0" max="4" low="2" high="3" optimum="4"></meter>
const input = document.querySelector('#pw');
const meter = document.querySelector('#strength');
const score = (pw) =>
[/.{8,}/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/]
.filter((re) => re.test(pw)).length;
input.addEventListener('input', () => {
meter.value = score(input.value);
console.log('Stärke:', meter.value);
});Ungültige Werte abfangen
const meter = document.createElement('meter');
console.log(meter.value); // kein Attribut → 0
try {
meter.value = NaN;
} catch (err) {
console.log(err.name);
}// Wichtig · Fallstricke
- Begrenzung nur beim Lesen: Das Attribut behält den gesetzten Rohwert, etwa
"150".meter.valueliefert dagegen den begrenzten Wert. Wer den Rohwert braucht, verwendetgetAttribute('value'). - Standardbereich 0–1: Ohne
minundmaxwirdmeter.value = 42als1gelesen. Legen Sie den Bereich deshalb vorher fest. - Ungültige Werte:
NaNund±Infinitylösen beim Setzen einenTypeErroraus. Andere Werte werden in Zahlen umgewandelt: Ein String wie"abc"ergibtNaNund damit ebenfalls einen Fehler,nullergibt0. - Kein Formularwert:
<meter>ist kein Formularfeld. Sein Wert wird nicht mit dem Formular gesendet und löst keineinput- oderchange-Events aus. - Barrierefreiheit: Screenreader lesen den Wert unterschiedlich vor. Setzen Sie bei Bedarf einen Text zwischen die Tags oder ein
aria-labelbzw.title. - Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Der Internet Explorer kennt
<meter>nicht; dort istvalueundefined.