HTMLMeterElement.low — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMeterElement.low

Beschreibung

Die Eigenschaft low der Schnittstelle HTMLMeterElement spiegelt das HTML-Attribut low des <meter>-Elements wider. Sie legt fest, bis zu welchem Wert ein Messwert als niedrig gilt. Zusammen mit high und optimum teilt sie den Bereich zwischen min und max in drei Abschnitte: niedrig, mittel und hoch.

Der Browser nutzt diese Einteilung für die Darstellung: Je nachdem, in welchem Abschnitt value liegt und wo optimum liegt, wird die Anzeige z. B. grün (optimal), gelb (suboptimal) oder rot (schlecht) eingefärbt. Typische Anwendungen sind Akkustand, Speicherbelegung, Passwortstärke oder Bewertungen.

Beim Lesen liefert die Eigenschaft immer einen bereinigten Wert: Fehlt das Attribut oder ist es ungültig, entspricht low dem Wert von min. Ist der angegebene Wert kleiner als min, wird min zurückgegeben; ist er größer als max, wird max zurückgegeben. Beim Setzen wird das Attribut low entsprechend aktualisiert.

Parameter

Name	Typ	Default	Beschreibung
$wert	number	Wert von min	Beim Setzen: neue untere Grenze des mittleren Bereichs. Wird in das Attribut `low` geschrieben. Nicht-endliche Werte (`NaN`, `Infinity`) lösen einen `TypeError` aus.

Rückgabewert

Typ

number

Beschreibung

Die effektive untere Grenze als Gleitkommazahl, stets zwischen min und max geklemmt. Ohne gültiges Attribut entspricht sie min.

Beispiele

Wert von low auslesen

// HTML: <meter id="akku" min="0" max="100" low="20" high="80" optimum="90" value="15"></meter>
const akku = document.getElementById('akku');
console.log(akku.low);
console.log(akku.value < akku.low ? 'Akku fast leer!' : 'Akku ok');

20 Akku fast leer!

Klemmung auf min/max beobachten

const meter = document.createElement('meter');
meter.min = 10;
meter.max = 50;

console.log(meter.low); // kein Attribut → min

meter.low = 5;          // kleiner als min
console.log(meter.low, meter.getAttribute('low'));

meter.low = 99;         // größer als max
console.log(meter.low);

10 10 "5" 50

Schwellenwerte dynamisch anpassen (Speicherbelegung)

// HTML: <meter id="speicher" min="0" max="1" optimum="0"></meter>
const speicher = document.getElementById('speicher');

const aktualisieren = (belegt, gesamt, warnAb = 0.7, kritischAb = 0.9) => {
  speicher.low = warnAb;      // bis hier: grün
  speicher.high = kritischAb; // ab hier: rot
  speicher.value = belegt / gesamt;
  speicher.textContent = `${Math.round(speicher.value * 100)} %`;
};

aktualisieren(750, 1000);
console.log(speicher.low, speicher.high, speicher.value);

0.7 0.9 0.75

// Wichtig · Fallstricke

Gelesener Wert ≠ Attributwert: low liefert den geklemmten Wert, getAttribute('low') dagegen den rohen String. Außerdem gilt: Ist low größer als high, behandelt der Browser intern high als mindestens low – die Darstellung kann dann unerwartet aussehen.
Die Farbgebung hängt von optimum ab: Ohne optimum gilt die Mitte zwischen min und max als optimal. Wer low setzt, sollte auch optimum bewusst wählen.
Das Setzen von NaN oder Infinity wirft einen TypeError.
Die genaue Farbdarstellung ist browserabhängig und nur eingeschränkt per CSS gestaltbar (z. B. ::-webkit-meter-optimum-value, ::-moz-meter-bar).
Kompatibilität: in allen modernen Browsern unterstützt; der Internet Explorer kennt <meter> nicht.

Siehe auch

HTMLMetaElement.scheme HTMLMeterElement.max HTMLMeterElement.min HTMLMeterElement.high HTMLMeterElement.value