HTMLMeterElement.high — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMeterElement.high

Beschreibung

Die Eigenschaft high des Interfaces HTMLMeterElement gehört zum HTML-Attribut high eines <meter>-Elements. Sie gibt an, ab welchem Wert ein Messwert als „hoch“ gilt. Zusammen mit low und optimum teilt sie den Bereich zwischen min und max in einen niedrigen, einen mittleren und einen hohen Abschnitt auf.

Der Browser färbt die Anzeige anhand dieser Abschnitte ein: Liegt value im selben Abschnitt wie optimum, gilt der Wert als optimal (meist grün). Liegt er in einem angrenzenden Abschnitt, gilt er als suboptimal (gelb), und in einem noch weiter entfernten Abschnitt als schlecht (rot). Typische Einsatzfälle sind Anzeigen für Speicherplatz, Akkustand, Passwortstärke oder Auslastung.

Beim Lesen liefert die Eigenschaft den tatsächlich wirksamen, also bereits begrenzten Wert und nicht unbedingt den Text im Attribut: Fehlt das Attribut oder lässt es sich nicht auswerten, entspricht high dem Wert von max. Ist es größer als max, wird max zurückgegeben. Ist es kleiner als die wirksame untere Grenze (low), wird diese zurückgegeben. Beim Schreiben wird der Wert als Zahl in das Attribut high übernommen.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	number	Wert von max	Neue obere Grenze. Wird in das Attribut `high` geschrieben. Es muss eine endliche Zahl sein.

Rückgabewert

Typ

number

Beschreibung

Die wirksame obere Grenze als Fließkommazahl (Double). Der Wert ist auf den Bereich zwischen low und max begrenzt.

Beispiele

Obere Grenze auslesen

// HTML: <meter id="disk" min="0" max="100" low="30" high="80" optimum="20" value="65"></meter>
const disk = document.getElementById('disk');
console.log(disk.high);  // 80
console.log(typeof disk.high); // "number"

80 number

Begrenzung: fehlendes oder zu großes Attribut

const meter = document.createElement('meter');
meter.max = 10;
console.log(meter.high); // kein Attribut → entspricht max: 10

meter.setAttribute('high', '50');
console.log(meter.getAttribute('high')); // "50"
console.log(meter.high);                 // auf max begrenzt: 10

meter.low = 4;
meter.high = 2;
console.log(meter.high); // kleiner als low → 4

10 50 10 4

Schwellenwert für Speicherauslastung dynamisch anpassen

// HTML: <meter id="storage" min="0" max="1" low="0.5" optimum="0.2"></meter>
const storageMeter = document.getElementById('storage');

const updateStorage = async () => {
  const { usage, quota } = await navigator.storage.estimate();
  storageMeter.value = usage / quota;
  // Auf kleinen Kontingenten (< 1 GB) früher warnen
  storageMeter.high = quota < 1e9 ? 0.7 : 0.9;
  const status = storageMeter.value >= storageMeter.high ? 'kritisch' : 'ok';
  console.log(`Auslastung ${(storageMeter.value * 100).toFixed(1)} % – ${status}`);
};

updateStorage();

Auslastung 12.3 % – ok

// Wichtig · Fallstricke

Gelesener Wert ≠ Attributwert: Der Getter liefert den begrenzten, wirksamen Wert. Den Originaltext des Attributs erhält man mit getAttribute('high').
Nicht endliche Werte wie NaN oder Infinity führen beim Setzen zu einem TypeError.
Die Reihenfolge beim Setzen ist wichtig: Setzt man high vor max oder low, kann der gelesene Wert vorübergehend anders aussehen als erwartet. Die Begrenzung wird bei jedem Lesen neu berechnet.
Die Einfärbung (grün, gelb, rot) hängt vom Browser ab und wirkt nur zusammen mit optimum sinnvoll. Für barrierefreie Anzeigen sollte man den Zustand zusätzlich als Text ausgeben.
Kompatibilität: Alle modernen Browser unterstützen die Eigenschaft, der Internet Explorer nicht.

Siehe auch

HTMLMetaElement.name HTMLMeterElement.min HTMLMeterElement.low HTMLMeterElement.max HTMLMeterElement.value