HTMLUListElement.compact — Eigenschaft · JavaScript-Referenz

Signatur

HTMLUListElement.compact

Beschreibung

Die Eigenschaft compact des Interfaces HTMLUListElement spiegelt das gleichnamige HTML-Attribut eines <ul>-Elements. Ist sie true, soll der Browser die Liste mit weniger Abstand zwischen den Listeneinträgen darstellen. Beim Setzen auf true wird das Attribut compact (ohne Wert) hinzugefügt, beim Setzen auf false wird es entfernt.

Die Eigenschaft ist veraltet und gehört nicht mehr zum gültigen HTML. Moderne Browser werten das Attribut für die Darstellung praktisch nicht mehr aus. Die Eigenschaft gibt es nur noch aus Gründen der Abwärtskompatibilität.

Sinnvoll ist sie heute höchstens, um in altem Markup zu erkennen, ob das Attribut gesetzt ist, oder um solches Markup auf moderne Technik umzustellen. Für kompakte Listen nimmst du stattdessen CSS, etwa margin, padding oder line-height auf den <li>-Elementen.

Beispiele

Attribut auslesen

// HTML: <ul id="menu" compact><li>Start</li><li>Kontakt</li></ul>
const list = document.querySelector('#menu');
console.log(list.compact);
console.log(list.hasAttribute('compact'));

true true

Eigenschaft setzen und entfernen

const list = document.createElement('ul');
list.compact = true;
console.log(list.outerHTML);

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

Altes Markup auf CSS umstellen

// Alle veralteten compact-Listen finden und durch eine CSS-Klasse ersetzen
// CSS: .liste-kompakt li { margin: 0; padding: 0; line-height: 1.2; }
document.querySelectorAll('ul').forEach((ul) => {
  if (ul.compact) {
    ul.compact = false;
    ul.classList.add('liste-kompakt');
  }
});
console.log(document.querySelectorAll('ul[compact]').length);

// Wichtig · Fallstricke

Veraltet: Das Attribut compact ist in HTML5 nicht mehr gültig. Validatoren melden es als Fehler. Nutze in neuem Code stattdessen CSS.
Keine sichtbare Wirkung: Aktuelle Browser (Chrome, Firefox, Safari, Edge) stellen die Eigenschaft zwar noch bereit, verändern die Darstellung aber in der Regel nicht. Wenn du dich auf die Optik verlässt, wirst du enttäuscht.
Jeder Wert des Attributs gilt als true, auch compact="false". Entscheidend ist nur, ob das Attribut vorhanden ist.
Für nummerierte Listen gibt es die entsprechende Eigenschaft HTMLOListElement.compact. Auch sie ist veraltet.

Siehe auch

HTMLDListElement.compact HTMLMenuElement.compact HTMLOListElement.compact HTMLOListElement.start HTMLOListElement.type