HTMLMeterElement.min — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMeterElement.min

Beschreibung

Die Eigenschaft min der Schnittstelle HTMLMeterElement gibt die untere Grenze des Messbereichs eines <meter>-Elements als number (IDL-Typ double) zurück. Sie spiegelt das gleichnamige HTML-Attribut min wider: Wenn du die Eigenschaft setzt, wird das Attribut aktualisiert, und umgekehrt.

Fehlt das Attribut oder lässt es sich nicht als gültige Gleitkommazahl lesen, liefert die Eigenschaft den Standardwert 0. Aus min und max berechnet der Browser, wie weit die Anzeige gefüllt ist. value, low, high und optimum werden dabei auf diesen Bereich begrenzt. Ist max kleiner als min, wird für die Berechnung max gleich min gesetzt.

Typische Einsatzfälle sind Anzeigen, deren Bereich nicht bei null beginnt, z. B. Temperaturen (−20 bis 40 °C), Noten (1 bis 6) oder ein Akkustand mit einem kritischen Mindestwert. Ändert sich der Bereich zur Laufzeit, passt du min per JavaScript an, und die Darstellung wird sofort neu gezeichnet.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	number	0	Neue Untergrenze. Der Wert wird in eine Zahl umgewandelt und als Attribut `min` gespeichert. Er muss endlich sein, sonst wird ein `TypeError` ausgelöst.

Rückgabewert

Typ

number

Beschreibung

Die aktuelle Untergrenze als Gleitkommazahl. Ist das Attribut nicht vorhanden oder ungültig, ist der Wert 0.

Beispiele

Untergrenze auslesen

// HTML: <meter id="temp" min="-20" max="40" value="18"></meter>
const meter = document.querySelector('#temp');
console.log(meter.min);
console.log(typeof meter.min);

// Ohne Attribut gilt der Standardwert
const leer = document.createElement('meter');
console.log(leer.min);

-20 number 0

Bereich zur Laufzeit anpassen

const meter = document.createElement('meter');
meter.max = 6;
meter.min = 1;     // Schulnoten 1 bis 6
meter.value = 2.3;
document.body.append(meter);

console.log(meter.getAttribute('min')); // Attribut wurde mitgesetzt
console.log(meter.outerHTML);

1 <meter max="6" min="1"></meter>

Füllgrad relativ zu min/max berechnen

const fuellgrad = (meter) => {
  const { min, max, value } = meter;
  if (max <= min) return 0;
  return ((value - min) / (max - min)) * 100;
};

const m = document.createElement('meter');
m.min = -20;
m.max = 40;
m.value = 10;
console.log(`${fuellgrad(m).toFixed(1)} %`);

50.0 %

Begrenzung von value durch min

const m = document.createElement('meter');
m.min = 10;
m.max = 100;
m.value = 5;          // liegt unter min
console.log(m.value); // wird auf min begrenzt

try {
  m.min = NaN;
} catch (err) {
  console.log(err.name);
}

10 TypeError

// Wichtig · Fallstricke

Nicht-endliche Werte: Wenn du NaN, Infinity oder -Infinity zuweist, wird ein TypeError ausgelöst, weil die Eigenschaft den IDL-Typ double hat. Prüfe eingehende Werte daher vorher mit Number.isFinite().
Zeichenketten: Eine Zuweisung wie meter.min = "5" wird still in eine Zahl umgewandelt. Ungültige Attributwerte im HTML, z. B. min="abc", führen beim Lesen zu 0.
Keine Validierung der Reihenfolge: Ein min größer als max löst keinen Fehler aus. Der Browser rechnet dann aber intern mit max = min, und die Anzeige wirkt leer oder voll. Setze beim Umstellen des Bereichs zuerst den Wert, der den Bereich vergrößert.
Anzeige, keine Eingabe: <meter> zeigt einen Messwert innerhalb eines bekannten Bereichs an. Für einen Fortschritt ist <progress> das passendere Element; es hat kein min-Attribut.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). Der Internet Explorer kennt <meter> nicht.

Siehe auch

HTMLMeterElement.max HTMLMeterElement.high HTMLMeterElement.low HTMLMeterElement.value HTMLMeterElement.labels