HTMLDListElement.compact — Eigenschaft · JavaScript-Referenz

Signatur

HTMLDListElement.compact

Beschreibung

Die Eigenschaft compact des Interfaces HTMLDListElement ist ein boolescher Wert, der das gleichnamige HTML-Attribut eines <dl>-Elements (Definitionsliste bzw. Beschreibungsliste) widerspiegelt. Ist sie true, soll der Browser die Liste kompakter darstellen, also die Abstände zwischen den Einträgen (<dt>/<dd>) verringern.

Das Lesen liefert true, sobald das Attribut compact vorhanden ist – unabhängig von seinem Wert. Das Setzen auf true fügt das Attribut als leeres Attribut hinzu, das Setzen auf false entfernt es.

Die Eigenschaft gilt als veraltet und ist in HTML5 nicht mehr konform. Moderne Browser werten das Attribut für die Darstellung praktisch nicht aus. Sie ist heute nur noch für Altcode oder zum Auslesen historischer Dokumente relevant; für das Layout sollte man stattdessen CSS verwenden, etwa margin, padding oder line-height an dt und dd.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut compact am <dl>-Element gesetzt ist, sonst false. Schreibbar: Beim Setzen wird das Attribut hinzugefügt bzw. entfernt.

Beispiele

Attributstatus auslesen

// HTML: <dl id="glossar" compact><dt>API</dt><dd>Programmierschnittstelle</dd></dl>
const liste = document.querySelector('#glossar');
console.log(liste.compact);
console.log(liste.hasAttribute('compact'));

true true

compact setzen und entfernen

const liste = document.createElement('dl');
console.log(liste.compact); // false

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

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

false <dl compact=""></dl> <dl></dl>

Altdokumente modernisieren: compact durch CSS-Klasse ersetzen

// Alle veralteten compact-Listen auf eine CSS-Klasse umstellen
const stil = document.createElement('style');
stil.textContent = `
  dl.kompakt dt, dl.kompakt dd { margin-block: 0; }
  dl.kompakt dd { margin-inline-start: 1rem; }
`;
document.head.append(stil);

const listen = document.querySelectorAll('dl');
let umgestellt = 0;
for (const dl of listen) {
  if (dl.compact) {
    dl.compact = false;          // veraltetes Attribut entfernen
    dl.classList.add('kompakt'); // Darstellung per CSS steuern
    umgestellt++;
  }
}
console.log(`${umgestellt} Liste(n) umgestellt`);

z. B. "2 Liste(n) umgestellt"

// Wichtig · Fallstricke

Veraltet: Das Attribut compact ist in HTML5 nicht mehr erlaubt; HTML-Validatoren melden es als Fehler. Nicht in neuem Code verwenden.
Keine sichtbare Wirkung: Aktuelle Browser (Chrome, Firefox, Safari, Edge) stellen die Eigenschaft aus Kompatibilitätsgründen zwar bereit, ändern aber die Darstellung nicht verlässlich. Abstände steuert man mit CSS.
Boolesches Attribut: Auch compact="false" im HTML ergibt dl.compact === true, denn es zählt nur, ob das Attribut vorhanden ist.
Dieselbe veraltete Eigenschaft gibt es auch bei HTMLUListElement, HTMLOListElement, HTMLMenuElement und HTMLDirectoryElement.

Siehe auch

HTMLDialogElement.closedBy HTMLMenuElement.compact HTMLOListElement.compact HTMLUListElement.compact HTMLOListElement.start