HTMLOListElement.start — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOListElement.start

Beschreibung

Die Eigenschaft start eines HTMLOListElement spiegelt das Inhaltsattribut start des <ol>-Elements. Sie gibt an, mit welcher Zahl das erste Listenelement nummeriert wird. Der Wert ist immer eine Ganzzahl (IDL-Typ long), auch wenn die Liste Buchstaben oder römische Ziffern zeigt (type="a", type="I"). Dann entspricht start = 3 dem Buchstaben „c“ bzw. der Ziffer „III“.

Fehlt das Attribut oder lässt es sich nicht als Ganzzahl lesen, liefert die Eigenschaft 1. Wenn Sie der Eigenschaft einen Wert zuweisen, schreibt der Browser ihn sofort als Attribut ins DOM (start="…"). Die Darstellung aktualisiert sich dann automatisch.

Typische Anwendungsfälle:

Listen, die über mehrere Seiten oder Abschnitte verteilt sind, fortlaufend nummerieren (z. B. Seite 2 beginnt bei 11).
Countdowns oder Ranglisten zusammen mit reversed.
Die Nummerierung dynamisch anpassen, wenn per JavaScript Einträge nachgeladen oder gefiltert werden.

Rückgabewert

Typ

number

Beschreibung

Eine Ganzzahl mit dem Startwert der Nummerierung. Negative Werte und 0 sind erlaubt. Ohne gültiges start-Attribut ist der Wert 1.

Beispiele

Startwert auslesen

// HTML: <ol id="schritte" start="4"><li>Kompilieren</li><li>Testen</li></ol>
//       <ol id="standard"><li>A</li></ol>
const schritte = document.querySelector('#schritte');
const standard = document.querySelector('#standard');

console.log(schritte.start);  // Attribut gesetzt
console.log(standard.start);  // kein Attribut vorhanden

4 1

Paginierte Liste fortlaufend nummerieren

// Jede Seite zeigt 10 Einträge, die Nummerierung soll seitenübergreifend weiterlaufen
const SEITENGROESSE = 10;

const renderSeite = (liste, eintraege, seite) => {
  liste.replaceChildren(
    ...eintraege.map((text) => {
      const li = document.createElement('li');
      li.textContent = text;
      return li;
    })
  );
  liste.start = (seite - 1) * SEITENGROESSE + 1;
};

const liste = document.createElement('ol');
renderSeite(liste, ['Eintrag K', 'Eintrag L'], 2);
console.log(liste.start);
console.log(liste.outerHTML);

11 <ol start="11"><li>Eintrag K</li><li>Eintrag L</li></ol>

Countdown mit reversed und start

// Top-5-Rangliste, die von 5 bis 1 herunterzählt
const rangliste = document.createElement('ol');
rangliste.reversed = true;

['Platz fünf', 'Platz vier', 'Platz drei', 'Platz zwei', 'Sieger'].forEach((t) => {
  rangliste.append(Object.assign(document.createElement('li'), { textContent: t }));
});

// Ohne start-Attribut liefert die Eigenschaft 1, obwohl die Anzeige bei 5 beginnt
console.log(rangliste.start);

// Startwert explizit setzen, damit er auch per Skript eindeutig lesbar ist
rangliste.start = rangliste.children.length;
console.log(rangliste.getAttribute('start'));
document.body.append(rangliste);

1 "5"

Wertumwandlung beim Setzen

const ol = document.createElement('ol');

ol.start = '7';     // String wird in eine Zahl umgewandelt
console.log(ol.start);

ol.start = 3.9;     // Nachkommastellen werden abgeschnitten
console.log(ol.start);

ol.start = -2;      // negative Werte sind erlaubt
console.log(ol.start, ol.getAttribute('start'));

7 3 -2 "-2"

// Wichtig · Fallstricke

Umkehrte Listen: Fehlt bei <ol reversed> das start-Attribut, zählt der Browser in der Anzeige von der Anzahl der Einträge herunter. Die Eigenschaft liefert trotzdem 1. Wenn Ihr Skript den tatsächlich angezeigten Startwert braucht, setzen Sie start explizit.
Umwandlung: Zugewiesene Werte werden in einen 32-Bit-long umgewandelt. Nachkommastellen fallen weg, und NaN oder nicht-numerische Strings ergeben 0. Prüfen Sie Benutzereingaben deshalb vor der Zuweisung.
Nicht mit value verwechseln: start gilt für die ganze Liste. HTMLLIElement.value setzt die Nummer eines einzelnen <li>, und die folgenden Einträge zählen von dort weiter.
CSS-Zähler: Wenn die Nummerierung per CSS (counter-reset, list-style: none mit eigenen ::before-Zählern) erzeugt wird, wirkt sich start nicht automatisch darauf aus.
Kompatibilität: Wird in allen Browsern unterstützt. Das Attribut war in HTML 4.01 als veraltet markiert und ist seit HTML5 wieder gültig.

Siehe auch

HTMLOListElement HTMLOListElement.reversed HTMLOListElement.type HTMLLIElement.value Element.setAttribute() ElementInternals.shadowRoot HTMLLinkElement.media