HTMLOListElement.reversed — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOListElement.reversed

Beschreibung

Die Eigenschaft reversed des Interfaces HTMLOListElement spiegelt das gleichnamige boolesche HTML-Attribut eines <ol>-Elements wider. Ist sie true, zählen die Listenpunkte absteigend (z. B. 3, 2, 1 statt 1, 2, 3). Das ist praktisch für Top-10-Listen, Countdowns oder chronologisch rückwärts sortierte Einträge wie Changelogs.

Die Eigenschaft kann gelesen und gesetzt werden. Setzt man sie auf true, fügt der Browser das Attribut reversed="" hinzu, bei false wird es entfernt. Die Reihenfolge der DOM-Knoten ändert sich dabei nicht: Nur die angezeigte Nummerierung wird umgekehrt. Wer die Elemente tatsächlich umsortieren möchte, muss die <li>-Knoten selbst neu anordnen.

Ohne start-Attribut beginnt eine umgekehrte Liste bei der Anzahl ihrer Einträge. Mit start (bzw. HTMLOListElement.start) lässt sich der Startwert festlegen, von dem aus heruntergezählt wird.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut reversed gesetzt ist und die Liste absteigend nummeriert wird, sonst false.

Beispiele

Status einer Liste auslesen

// HTML: <ol id="top" reversed><li>Platz 3</li><li>Platz 2</li><li>Platz 1</li></ol>
const liste = document.querySelector('#top');
console.log(liste.reversed);
console.log(liste.hasAttribute('reversed'));

true true

Nummerierung per Button umschalten

// HTML: <ol id="changelog">…</ol> <button id="toggle">Reihenfolge umkehren</button>
const liste = document.querySelector('#changelog');
const button = document.querySelector('#toggle');

button.addEventListener('click', () => {
  liste.reversed = !liste.reversed;
  button.textContent = liste.reversed ? 'Aufsteigend zählen' : 'Absteigend zählen';
});

Countdown-Liste dynamisch mit Startwert erzeugen

const schritte = ['Zündung', 'Triebwerke', 'Abheben'];
const ol = document.createElement('ol');
ol.reversed = true;
ol.start = 10; // zählt 10, 9, 8

for (const text of schritte) {
  const li = document.createElement('li');
  li.textContent = text;
  ol.append(li);
}
document.body.append(ol);
console.log(ol.outerHTML);

<ol reversed="" start="10"><li>Zündung</li><li>Triebwerke</li><li>Abheben</li></ol>

// Wichtig · Fallstricke

Nur die Anzeige ändert sich: reversed dreht lediglich die Zahlen um, nicht die Reihenfolge der <li>-Elemente im DOM oder im Screenreader-Lesefluss.
Boolesches Attribut: Im HTML zählt allein, ob das Attribut vorhanden ist. reversed=\"false\" im Markup bedeutet trotzdem true. Zum Entfernen el.reversed = false oder removeAttribute('reversed') verwenden.
Startwert: Wird start nicht gesetzt, beginnt die Zählung bei der Anzahl der Listenpunkte. Das berechnet der Browser beim Hinzufügen oder Entfernen von Einträgen neu. Listenpunkte mit eigenem value-Attribut beeinflussen die Nummerierung der folgenden Einträge.
CSS-Zähler: Wenn die Nummerierung über eigene counter-reset/counter-increment-Regeln statt über ::marker erfolgt, hat reversed keine automatische Wirkung. Absteigende CSS-Zähler brauchen dann counter-reset: reversed(name).
Kompatibilität: Wird von allen modernen Browsern unterstützt. Im Internet Explorer fehlte die Unterstützung.

Siehe auch

HTMLOListElement HTMLOListElement.start HTMLOListElement.type HTMLLIElement.value Element.toggleAttribute() HTMLHtmlElement.version HTMLLinkElement.imageSrcset