HTMLMeterElement.max — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMeterElement.max

Beschreibung

Die Eigenschaft max der Schnittstelle HTMLMeterElement gibt die obere Grenze des Messbereichs eines <meter>-Elements als number zurück. Sie spiegelt das gleichnamige HTML-Attribut max wider. Ändert man die Eigenschaft, wird auch das Attribut im DOM aktualisiert.

Der Browser bestimmt den Wert nach festen Regeln:

Fehlt das Attribut max oder lässt es sich nicht als Zahl lesen, ist der Maximalwert 1.
Ist der angegebene Wert kleiner als min, gibt max den Wert von min zurück. So bleibt der Bereich gültig.

Sie brauchen max, wenn Sie Anzeigen dynamisch anpassen wollen, zum Beispiel für Speicherplatz, Akkustand, Passwortstärke oder Kontingente. Dort ändert sich die Obergrenze oft erst zur Laufzeit, etwa wenn die Server-Antwort mit dem Gesamtkontingent eintrifft. Zusammen mit min, low, high und optimum legt max fest, wie der Browser den aktuellen value einfärbt und darstellt.

Parameter

Name	Typ	Default	Beschreibung
$wert (Setter)	number	1	Neuer Maximalwert. Muss eine endliche Zahl sein. Er wird in das Attribut `max` geschrieben.

Rückgabewert

Typ

number

Beschreibung

Der wirksame Maximalwert als Gleitkommazahl. Ohne gültiges Attribut ist er 1. Ist der Wert kleiner als min, wird min zurückgegeben.

Beispiele

Maximalwert auslesen

// HTML: <meter id="disk" min="0" max="500" value="320"></meter>
const disk = document.querySelector('#disk');
console.log(disk.max);
console.log(typeof disk.max);

500 number

Standardwert und Begrenzung durch min

const m = document.createElement('meter');
console.log(m.max); // kein Attribut gesetzt

m.min = 10;
m.setAttribute('max', '5'); // kleiner als min
console.log(m.max);
console.log(m.getAttribute('max'));

1 10 5

Kontingent-Anzeige dynamisch anpassen

// HTML: <meter id="quota" min="0" value="0"></meter> <span id="label"></span>
const quota = document.querySelector('#quota');
const label = document.querySelector('#label');

const updateQuota = async () => {
  // Simulierte API-Antwort
  const data = await Promise.resolve({ usedGB: 42.5, totalGB: 100 });
  quota.max = data.totalGB;
  quota.high = data.totalGB * 0.8; // ab 80 % Warnfarbe
  quota.value = data.usedGB;
  label.textContent = `${quota.value} von ${quota.max} GB belegt`;
  console.log(label.textContent);
};

updateQuota();

42.5 von 100 GB belegt

// Wichtig · Fallstricke

Nicht endliche Werte: Wenn Sie NaN oder Infinity zuweisen, wird ein TypeError ausgelöst. Nicht numerische Werte werden vorher in eine Zahl umgewandelt: 'abc' wird zu NaN und löst damit ebenfalls einen Fehler aus.
Eigenschaft und Attribut können abweichen: Ist max kleiner als min, liefert die Eigenschaft den Wert von min. getAttribute('max') gibt dagegen den ursprünglich gesetzten Text zurück.
Reihenfolge beachten: value wird für die Darstellung auf den Bereich zwischen min und max begrenzt. Setzen Sie deshalb erst max und danach value, damit der Wert nicht unbeabsichtigt abgeschnitten erscheint.
Semantik: <meter> ist für Messwerte in einem bekannten Bereich gedacht. Für einen Fortschritt, etwa beim Hochladen, ist <progress> das passende Element.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer kennt <meter> nicht.

Siehe auch

HTMLMeterElement.min HTMLMeterElement.low HTMLMeterElement.high HTMLMeterElement.value HTMLMeterElement.labels