HTMLOListElement.compact — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOListElement.compact

Beschreibung

Die Eigenschaft compact der Schnittstelle HTMLOListElement spiegelt das gleichnamige HTML-Attribut eines <ol>-Elements wider. Ist sie true, soll der Browser die Liste mit geringerem Abstand zwischen den Einträgen darstellen. Das Attribut ist ein boolesches Attribut: Allein seine Anwesenheit bedeutet true, der Attributwert selbst spielt keine Rolle.

Setzt man list.compact = true, fügt der Browser das Attribut compact="" in das Markup ein; mit false wird es entfernt. Umgekehrt wirken sich setAttribute("compact", "") und removeAttribute("compact") direkt auf den Wert der Eigenschaft aus.

Das Attribut ist seit HTML 4.01 veraltet und im HTML Living Standard als obsolet eingestuft. Die meisten aktuellen Browser werten es beim Rendern nicht mehr aus – die Eigenschaft existiert praktisch nur noch, damit alter Code nicht bricht. Für eine kompakte Darstellung sollte man heute CSS verwenden, etwa line-height, margin oder padding auf den <li>-Elementen.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut compact am <ol>-Element vorhanden ist, sonst false. Die Eigenschaft ist lesbar und schreibbar.

Beispiele

Attribut lesen und setzen

const list = document.createElement("ol");
console.log(list.compact);

list.compact = true;
console.log(list.outerHTML);

list.compact = false;
console.log(list.hasAttribute("compact"));

false <ol compact=""></ol> false

Zusammenspiel mit setAttribute / removeAttribute

const list = document.createElement("ol");

// Jeder Attributwert gilt als true – auch "false"!
list.setAttribute("compact", "false");
console.log(list.compact);

list.removeAttribute("compact");
console.log(list.compact);

true false

Altes Markup auf moderne CSS-Lösung umstellen

// Alle <ol compact> finden, Attribut entfernen und stattdessen eine CSS-Klasse setzen
const style = document.createElement("style");
style.textContent = ".liste-kompakt > li { margin: 0; line-height: 1.2; }";
document.head.append(style);

for (const ol of document.querySelectorAll("ol")) {
  if (ol.compact) {
    ol.compact = false;
    ol.classList.add("liste-kompakt");
  }
}
console.log(document.querySelectorAll("ol[compact]").length);

// Wichtig · Fallstricke

Veraltet: compact ist im HTML-Standard obsolet. Moderne Browser unterstützen zwar die DOM-Eigenschaft, ändern aber meist nichts an der Darstellung. Verwende stattdessen CSS (margin, padding, line-height).
Boolesches Attribut: setAttribute("compact", "false") setzt die Eigenschaft trotzdem auf true. Zum Deaktivieren immer removeAttribute() oder compact = false nutzen.
Nicht-boolesche Werte beim Setzen werden umgewandelt: list.compact = "nein" ergibt true, list.compact = 0 ergibt false.
Auch HTMLUListElement, HTMLDListElement, HTMLMenuElement und HTMLDirectoryElement haben eine gleichartige, ebenfalls veraltete compact-Eigenschaft.
Validatoren (z. B. der W3C-Validator) melden <ol compact> als Fehler.

Siehe auch

HTMLDListElement.compact HTMLOListElement.start HTMLOListElement.type HTMLOListElement.reversed HTMLUListElement.compact