HTMLMeterElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLMeterElement extends HTMLElement

Beschreibung

HTMLMeterElement ist die DOM-Schnittstelle des HTML-Elements <meter>. Zusätzlich zu allem, was sie von HTMLElement erbt, stellt sie Eigenschaften bereit, mit denen sich ein skalarer Messwert innerhalb eines festen Bereichs auslesen und setzen lässt – typische Beispiele sind Festplattenbelegung, Akkustand, Passwortstärke oder Bewertungsergebnisse.

Die wichtigsten Eigenschaften (alle vom Typ number, jeweils die Entsprechung des gleichnamigen HTML-Attributs):

value – der aktuelle Wert; wird auf den Bereich min…max begrenzt.
min / max – Unter- und Obergrenze (Standard: 0 bzw. 1).
low / high – Grenzen des „niedrigen“ bzw. „hohen“ Bereichs.
optimum – der optimale Wert; bestimmt zusammen mit low/high, ob der Browser den Balken grün, gelb oder rot darstellt.
labels – schreibgeschützte NodeList der zugehörigen <label>-Elemente.

Verwende <meter> für Messwerte, nicht für Fortschritt: Für den Fortschritt eines Vorgangs (Upload, Download) ist HTMLProgressElement das semantisch richtige Element. <meter> hat keinen unbestimmten Zustand und wird von Screenreadern als Messgröße angesagt.

Parameter

Name	Typ	Default	Beschreibung
$value	number	0	Aktueller Messwert. Wird beim Lesen auf `min`…`max` begrenzt.
$min	number	0	Untere Grenze des Bereichs.
$max	number	1	Obere Grenze des Bereichs. Ist sie kleiner als `min`, gilt `max = min`.
$low	number	min	Obergrenze des „niedrigen“ Teilbereichs, begrenzt auf `min`…`max`.
$high	number	max	Untergrenze des „hohen“ Teilbereichs, begrenzt auf `low`…`max`.
$optimum	number	(min + max) / 2	Optimaler Wert; entscheidet, welcher Teilbereich als „gut“ eingefärbt wird.
$labels	NodeList		Schreibgeschützt: alle `<label>`-Elemente, die mit dem Element verknüpft sind.

Rückgabewert

Typ

HTMLMeterElement

Beschreibung

Instanzen erhält man über document.createElement('meter') oder DOM-Abfragen wie document.querySelector('meter').

Beispiele

Meter-Element dynamisch erzeugen

// Speicherplatz-Anzeige erzeugen
const meter = document.createElement('meter');
meter.min = 0;
meter.max = 500;      // GB
meter.low = 300;
meter.high = 450;
meter.optimum = 100;  // wenig belegt ist gut
meter.value = 420;
meter.textContent = '420 von 500 GB belegt'; // Fallback-Text

document.body.append(meter);
console.log(meter instanceof HTMLMeterElement, meter.value);

true 420

Passwortstärke live anzeigen

// HTML: <label for="pw">Passwort</label><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 strength = document.querySelector('#strength');

const score = (pw) =>
  [/.{8,}/, /[A-Z]/, /[0-9]/, /[^A-Za-z0-9]/]
    .filter((re) => re.test(pw)).length;

input.addEventListener('input', () => {
  strength.value = score(input.value);
  console.log(`Stärke: ${strength.value}/${strength.max}`);
});

Stärke: 3/4 (z. B. bei „Sommer2024“)

Begrenzung (Clamping) von value beobachten

const m = document.createElement('meter');
m.max = 10;
m.value = 25;               // liegt über max
console.log(m.value);       // auf max begrenzt
console.log(m.getAttribute('value')); // Attribut bleibt unverändert
m.value = -3;
console.log(m.value);       // auf min begrenzt

10 25 0

// Wichtig · Fallstricke

Clamping: Die Eigenschaften liefern stets den begrenzten Wert, das HTML-Attribut behält jedoch den gesetzten Rohwert. Für Logik besser eigene Variablen verwenden statt getAttribute().
Standard-max ist 1, nicht 100. Wer nur value = 75 setzt, sieht einen vollen Balken.
Nicht-numerische Zuweisungen (z. B. meter.value = 'abc') lösen einen TypeError aus, weil der Wert keine endliche Zahl ist.
Die Farbe (grün/gelb/rot) ergibt sich allein aus low, high und optimum; das Styling ist browserspezifisch (::-webkit-meter-*, ::-moz-meter-bar) und nicht standardisiert.
Für Fortschrittsanzeigen <progress> verwenden – <meter> ist semantisch ein Messwert.
Kompatibilität: in allen aktuellen Browsern unterstützt; der Internet Explorer kennt das Element nicht (dort wird nur der Fallback-Text angezeigt).

Siehe auch

HTMLFrameSetElement HTMLMetaElement HTMLMediaElement HTMLMenuElement HTMLAreaElement