HTMLMenuElement.compact — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMenuElement.compact

Beschreibung

Die Eigenschaft compact der Schnittstelle HTMLMenuElement spiegelt das gleichnamige, veraltete HTML-Attribut compact eines <menu>-Elements. Ist sie true, soll der Browser die Listeneinträge mit weniger Abstand darstellen.

Die Eigenschaft ist lesbar und schreibbar. Wenn man sie auf true setzt, wird das Attribut compact (ohne Wert) am Element gesetzt. Mit false wird es entfernt. Beim Lesen erhält man true, sobald das Attribut vorhanden ist, egal welchen Wert es hat.

In der Praxis wird compact heute nicht mehr gebraucht. Die meisten aktuellen Browser setzen die kompakte Darstellung nicht sichtbar um. Den Abstand zwischen Listeneinträgen legt man stattdessen mit CSS fest, zum Beispiel über margin, padding oder line-height der <li>-Elemente. Nützlich ist die Eigenschaft höchstens noch, wenn man alte Dokumente bearbeitet oder das Attribut als Markierung für eigenes CSS verwenden möchte.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut compact am <menu>-Element vorhanden ist, sonst false. Wird ein Wert zugewiesen, wird er in einen booleschen Wert umgewandelt.

Beispiele

Zustand auslesen

// HTML: <menu id="werkzeuge" compact><li>Kopieren</li><li>Einfügen</li></menu>
const menu = document.querySelector('#werkzeuge');
console.log(menu.compact);
console.log(menu.hasAttribute('compact'));

true true

Kompakte Darstellung ein- und ausschalten

const menu = document.createElement('menu');
['Neu', 'Öffnen', 'Speichern'].forEach((text) => {
  const li = document.createElement('li');
  li.textContent = text;
  menu.append(li);
});
document.body.append(menu);

menu.compact = true;
console.log(menu.outerHTML.startsWith('<menu compact="">'));

menu.compact = false;
console.log(menu.hasAttribute('compact'));

true false

Moderne Alternative: CSS statt compact

// Das Attribut dient nur noch als Selektor, der Abstand kommt aus CSS
const style = document.createElement('style');
style.textContent = `
  menu[compact] li { margin: 0; padding: 0; line-height: 1.2; }
`;
document.head.append(style);

const menu = document.querySelector('menu');
const toggle = () => { menu.compact = !menu.compact; };
document.querySelector('#dichte-button')?.addEventListener('click', toggle);

// Wichtig · Fallstricke

Veraltet: Die Eigenschaft wird zwar in allen gängigen Browsern unterstützt, ist aber als veraltet eingestuft. In neuem Code sollte man sie nicht verwenden.
Kaum sichtbare Wirkung: Aktuelle Browser setzen compact meist nicht in eine andere Darstellung um. Es gibt keine Garantie für einen sichtbaren Unterschied, deshalb den Abstand immer mit CSS festlegen.
Umwandlung in boolean: menu.compact = \"false\" setzt das Attribut trotzdem, weil jede nicht leere Zeichenkette als true gilt. Genauso gilt compact=\"false\" im HTML als gesetzt.
Das Element <menu> selbst ist nicht veraltet. Im heutigen HTML ist es eine gleichwertige Alternative zu <ul> für Listen mit Befehlen, etwa in einer Werkzeugleiste. Die gleiche veraltete Eigenschaft gibt es auch bei HTMLUListElement.compact, HTMLOListElement.compact und HTMLDListElement.compact.

Siehe auch

HTMLFontElement.color HTMLOListElement.compact HTMLDListElement.compact HTMLUListElement.compact HTMLMetaElement.content