CSSStyleDeclaration.length — Eigenschaft · JavaScript-Referenz

Signatur

get CSSStyleDeclaration.length

Beschreibung

CSSStyleDeclaration.length gibt an, wie viele Eigenschaften in einem CSS-Deklarationsblock gesetzt sind. Solche Blöcke erhältst du über element.style (Inline-Stile), CSSStyleRule.style (Regeln aus Stylesheets) oder window.getComputedStyle() (berechnete Stile).

Meist nutzt man die Eigenschaft zusammen mit item(index) bzw. dem Indexzugriff style[i]. So kann man alle gesetzten Eigenschaftsnamen durchlaufen, etwa um Inline-Stile zu prüfen, zu kopieren oder zu serialisieren. Mit length === 0 lässt sich auch schnell prüfen, ob ein Element überhaupt Inline-Stile hat.

Wichtig: Gezählt werden ausgeschriebene Einzeleigenschaften (Longhands), nicht die Kurzschreibweisen, so wie du sie hingeschrieben hast. Aus margin: 0 werden zum Beispiel vier Einträge: margin-top, margin-right, margin-bottom und margin-left. Benutzerdefinierte Eigenschaften (--name) zählen jeweils als ein Eintrag.

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative Ganzzahl mit der Anzahl der Deklarationen (Longhands) im Block. Ist der Block leer, ist der Wert 0.

Beispiele

Inline-Stile zählen (Kurzschreibweisen werden aufgelöst)

const box = document.createElement('div');
box.style.cssText = 'color: red; margin: 0; --akzent: #09f';

console.log(box.style.length);
// color + 4 × margin-* + --akzent

6

Alle Inline-Eigenschaften mit item() auflisten

const el = document.querySelector('#hinweis') ?? document.body;
el.style.cssText = 'background-color: yellow; font-weight: bold';

const stile = {};
for (let i = 0; i < el.style.length; i++) {
  const name = el.style.item(i); // alternativ: el.style[i]
  stile[name] = el.style.getPropertyValue(name);
}
console.log(stile);

{ "background-color": "yellow", "font-weight": "bold" }

Prüfen, ob ein Element Inline-Stile hat

const hatInlineStile = (el) => el.style.length > 0;

const p = document.createElement('p');
console.log(hatInlineStile(p));
p.style.display = 'none';
console.log(hatInlineStile(p));
p.style.removeProperty('display');
console.log(hatInlineStile(p));

false true false

Deklarationen einer Stylesheet-Regel und berechnete Stile

const sheet = new CSSStyleSheet();
sheet.replaceSync('.karte { padding: 1rem; border-radius: 8px; }');

const regel = sheet.cssRules[0];
console.log(regel.style.length); // 4 × padding-* + 4 × border-*-radius

// Berechnete Stile enthalten ALLE vom Browser unterstützten Eigenschaften
const computed = getComputedStyle(document.body);
console.log(computed.length > 300);

8 true

// Wichtig · Fallstricke

Kurzschreibweisen werden aufgelöst: Der Wert entspricht fast nie der Zahl der Deklarationen im Quelltext. border: 1px solid ergibt je nach Browser zwölf oder mehr Einträge (inklusive border-image-*).
Berechnete Stile: Bei getComputedStyle() umfasst length alle Eigenschaften, die der Browser kennt – meist mehrere hundert. Der genaue Wert unterscheidet sich zwischen Browsern und Versionen. Verlass dich daher nicht auf eine feste Zahl. Auch ob benutzerdefinierte Eigenschaften mitgezählt werden, ist nicht in allen Engines gleich.
Schreibgeschützt: Eine Zuweisung wie el.style.length = 0 wird im nicht-strikten Modus stillschweigend ignoriert und löst im Strict Mode (auch in ES-Modulen) einen TypeError aus. Inline-Stile löschst du stattdessen mit el.style.cssText = '' oder el.removeAttribute('style').
Live-Wert: Die Zahl ändert sich sofort, wenn Eigenschaften hinzukommen oder entfernt werden. Wenn du beim Durchlaufen per removeProperty() löschst, iteriere rückwärts, sonst überspringst du Einträge.
Nur ausdrücklich gesetzte Werte: element.style.length zählt nur Inline-Stile. Stile aus Stylesheets oder geerbte Stile sind nicht enthalten.

Siehe auch

CSSStyleDeclaration.cssText CSSStyleDeclaration.cssFloat CSSStyleDeclaration.parentRule CSSNestedDeclarations.style CSSNumericArray.length