Signatur
Beschreibung
Die Eigenschaft optimum des HTMLMeterElement spiegelt das gleichnamige HTML-Attribut eines <meter>-Elements. Sie gibt an, welcher Wert als optimal gilt. Zusammen mit low und high legt sie fest, welcher Bereich der Skala der „gute“ ist.
Der Browser teilt die Skala über low und high in drei Bereiche: unterhalb von low, zwischen low und high und oberhalb von high. Der Bereich, in dem optimum liegt, gilt als optimal. Die angrenzenden Bereiche gelten als suboptimal, der gegenüberliegende als schlecht. Chromium- und Gecko-Browser stellen das meist farbig dar, typischerweise grün, gelb und rot.
Standardwert beim Lesen: Fehlt das Attribut oder lässt es sich nicht als Zahl lesen, liefert der Getter die Mitte zwischen min und max. Der gelieferte Wert wird außerdem immer auf den Bereich [min, max] begrenzt. Beim Setzen schreibt die Eigenschaft das Attribut optimum neu.
Typische Einsätze sind Anzeigen, bei denen die Richtung wichtig ist: Beim Akkustand oder bei einer Testabdeckung sind hohe Werte gut. Bei der Speicherauslastung oder der CPU-Temperatur sind niedrige Werte gut.
Rückgabewert
[min, max]. Ohne gültiges Attribut: (min + max) / 2.Beispiele
optimum auslesen, auch ohne gesetztes Attribut
document.body.innerHTML = `
<meter id="a" min="0" max="100" value="40"></meter>
<meter id="b" min="0" max="100" optimum="250" value="40"></meter>
`;
const a = document.getElementById('a');
const b = document.getElementById('b');
console.log(a.optimum); // kein Attribut → Mitte zwischen min und max
console.log(b.optimum); // 250 wird auf max begrenzt
console.log(b.getAttribute('optimum')); // das Attribut selbst bleibt unverändertAkkustand: hohe Werte sind gut
const akku = document.createElement('meter');
Object.assign(akku, { min: 0, max: 100, low: 20, high: 80, optimum: 100 });
akku.value = 15; // liegt unter low → schlechter Bereich (meist rot)
document.body.append(akku);
console.log(akku.optimum);
console.log(akku.outerHTML);Richtung zur Laufzeit umschalten (Auslastung vs. Füllstand)
const meter = document.createElement('meter');
Object.assign(meter, { min: 0, max: 1, low: 0.3, high: 0.7, value: 0.9 });
document.body.append(meter);
const setzeModus = (modus) => {
// Auslastung: niedrig ist gut; Füllstand: hoch ist gut
meter.optimum = modus === 'auslastung' ? 0 : 1;
meter.title = `Modus: ${modus}, optimum = ${meter.optimum}`;
};
setzeModus('auslastung'); // 0.9 wird jetzt als schlecht dargestellt
console.log(meter.title);
setzeModus('fuellstand'); // 0.9 wird jetzt als optimal dargestellt
console.log(meter.title);Fehler beim Setzen ungültiger Werte abfangen
const m = document.createElement('meter');
try {
m.optimum = NaN;
} catch (err) {
console.log(err.name);
}
m.optimum = '0.25'; // Strings werden in Zahlen umgewandelt
console.log(m.optimum, typeof m.optimum);// Wichtig · Fallstricke
- Begrenzung nur beim Lesen: Der Getter begrenzt den Wert auf
[min, max]. Das Attribut behält aber den ursprünglich gesetzten Wert.getAttribute('optimum')undmeter.optimumkönnen deshalb verschieden sein. - Nicht-endliche Werte: Wer
NaNoderInfinityzuweist, löst einenTypeErroraus, denn die IDL-Eigenschaft hat den Typdouble. Andere Werte, etwa Strings, werden in Zahlen umgewandelt. - Stiller Standardwert: Ohne Attribut wird die Mitte zwischen
minundmaxgeliefert. Liegt sie zwischenlowundhigh, gilt der mittlere Bereich als optimal. Das ist oft nicht gewollt, deshalboptimumimmer ausdrücklich setzen. - Nur Darstellung:
optimumwirkt sich lediglich auf die Darstellung aus. Die Farben hängen vom Browser ab und lassen sich nur über nicht standardisierte Pseudo-Elemente wie::-webkit-meter-optimum-valueoder:-moz-meter-optimumgestalten. - Barrierefreiheit: Screenreader geben den optimalen Bereich in der Regel nicht wieder. Wichtige Zustände wie „Akku fast leer“ sollten zusätzlich als Text mitgeteilt werden, etwa über ein Label oder
aria-describedby. - Browser-Unterstützung: Die Eigenschaft funktioniert in allen modernen Browsern. Internet Explorer kennt weder
<meter>noch diese Eigenschaft.