Signatur
Beschreibung
Die Eigenschaft value der Schnittstelle HTMLLIElement ist ein Integer, der das HTML-Attribut value eines <li>-Elements spiegelt. In einer geordneten Liste (<ol>) legt sie fest, welche Nummer dieses Listenelement anzeigt. Alle folgenden Einträge zählen ab diesem Wert weiter, also ab value + 1 (bzw. value - 1 bei reversed-Listen).
Typische Einsatzfälle sind fortgesetzte Nummerierungen (z. B. eine Liste, die nach einem Absatz bei 5 weiterläuft), Sprünge in der Zählung oder dynamisch erzeugte Ranglisten, bei denen einzelne Positionen gezielt gesetzt werden sollen. Das Setzen der Eigenschaft schreibt das Attribut value in das DOM.
Wichtig: Die Eigenschaft gibt nicht die tatsächlich angezeigte Nummer zurück, sondern nur den Attributwert. Ist kein value-Attribut gesetzt, liefert sie 0 – auch wenn der Browser das Element etwa als „3.“ darstellt. In ungeordneten Listen (<ul>) oder <menu> hat der Wert keine sichtbare Wirkung.
Rückgabewert
long) aus dem Attribut value; 0, wenn das Attribut fehlt oder nicht als Ganzzahl interpretierbar ist. Beim Schreiben wird der Wert in eine Ganzzahl umgewandelt und als Attribut gesetzt.Beispiele
Wert auslesen und setzen
// HTML: <ol><li>Alpha</li><li value="10">Beta</li><li>Gamma</li></ol>
const items = document.querySelectorAll('ol > li');
console.log(items[0].value); // kein Attribut gesetzt
console.log(items[1].value); // Attribut value="10"
// Gamma soll als Nummer 42 erscheinen
items[2].value = 42;
console.log(items[2].getAttribute('value'));Nummerierung einer zweiten Liste fortsetzen
// Zwei getrennte <ol>-Listen, die zweite soll weiterzählen
const [first, second] = document.querySelectorAll('ol.steps');
const count = first.querySelectorAll(':scope > li').length;
const firstItem = second.querySelector(':scope > li');
if (firstItem) {
firstItem.value = count + 1; // folgende Einträge zählen automatisch weiter
}
console.log(`Zweite Liste startet bei ${firstItem.value}`);Rangliste mit geteilten Plätzen
const players = [
{ name: 'Anna', score: 98 },
{ name: 'Ben', score: 95 },
{ name: 'Cem', score: 95 },
{ name: 'Dora', score: 90 }
];
const ol = document.createElement('ol');
let rank = 0;
players.forEach((p, i) => {
if (i === 0 || p.score < players[i - 1].score) rank = i + 1;
const li = document.createElement('li');
li.textContent = `${p.name} (${p.score})`;
li.value = rank; // gleiche Punktzahl = gleicher Platz
ol.append(li);
});
document.body.append(ol);
console.log([...ol.children].map(li => li.value));// Wichtig · Fallstricke
- Kein Ist-Wert:
li.valueliefert nur das Attribut, nicht die gerenderte Nummer. Ohne Attribut ist der Wert0. Die tatsächliche Position musst du selbst berechnen (z. B. ausol.startund dem Index). - Nachfolger: Das Setzen beeinflusst die Nummerierung aller folgenden
<li>, nicht nur des einen Elements. - Typumwandlung: Nicht-numerische Werte ergeben
0, Dezimalzahlen werden abgeschnitten. Negative Werte sind erlaubt. - Anzeige-Stil: Die Zahl ist immer numerisch; ob sie als „iv“ oder „D“ erscheint, entscheidet
typeder Liste bzw. CSSlist-style-type. - CSS-Zähler: Bei eigenen
counter()-Darstellungen wirktvaluenur auf den eingebauten Zählerlist-item. - Wird in allen modernen Browsern unterstützt; die Eigenschaft ist in HTML5 nicht mehr veraltet.