CSSValueList.length — Eigenschaft · JavaScript-Referenz

Signatur

get CSSValueList.length

Beschreibung

Die schreibgeschützte Eigenschaft length des Interfaces CSSValueList liefert die Anzahl der Einzelwerte in der Liste. Eine CSSValueList entsteht, wenn eine CSS-Eigenschaft mehrere Werte enthält, zum Beispiel font-family: Arial, sans-serif oder margin: 1px 2px. Man erhält sie über die alte Methode CSSStyleDeclaration.getPropertyCSSValue().

Die gültigen Indizes für CSSValueList.item(index) reichen von 0 bis length - 1. length ist daher die übliche Schleifengrenze, wenn du alle Werte der Liste durchlaufen willst. Ist die Liste leer, ist der Wert 0.

Wichtig: Das gesamte CSSValue-Modell aus DOM Level 2 CSS gilt als veraltet. Moderne Browser haben es entfernt. Nutze in neuem Code stattdessen das CSS Typed OM (element.computedStyleMap(), StylePropertyMapReadOnly.getAll()) oder werte die Zeichenkette aus, die getPropertyValue() zurückgibt.

Rückgabewert

Typ

number

Beschreibung

Eine nicht negative Ganzzahl (unsigned long): die Anzahl der CSSValue-Objekte in der Liste. Bei einer leeren Liste ist sie 0.

Beispiele

Werte einer CSSValueList durchlaufen (mit Feature-Erkennung)

const el = document.body;
el.style.fontFamily = 'Arial, Helvetica, sans-serif';

const style = getComputedStyle(el);

if (typeof style.getPropertyCSSValue === 'function') {
  const list = style.getPropertyCSSValue('font-family');
  // length gibt die Schleifengrenze vor
  for (let i = 0; i < list.length; i++) {
    console.log(i, list.item(i).cssText);
  }
} else {
  console.log('CSSValueList wird nicht unterstützt');
}

In modernen Browsern: CSSValueList wird nicht unterstützt In Altbrowsern: 0 Arial / 1 Helvetica / 2 sans-serif

Moderner Ersatz: Anzahl der Werte über das CSS Typed OM

const box = document.createElement('div');
document.body.append(box);
box.style.transition = 'opacity 1s, transform 2s';

if ('computedStyleMap' in box) {
  const values = box.computedStyleMap().getAll('transition-duration');
  console.log('Anzahl:', values.length);
  console.log(values.map(v => v.toString()));
}

Anzahl: 2 ["1s", "2s"]

Rückfall-Lösung: Werte aus der Zeichenkette zählen

const countListValues = (el, prop) => {
  const raw = getComputedStyle(el).getPropertyValue(prop);
  return raw ? raw.split(',').map(s => s.trim()).filter(Boolean).length : 0;
};

document.body.style.fontFamily = 'Georgia, serif';
console.log(countListValues(document.body, 'font-family'));

2

// Wichtig · Fallstricke

Veraltet und entfernt: CSSValue, CSSValueList und getPropertyCSSValue() stehen in keinem aktuellen Standard mehr. Chrome und Firefox (ab Version 62) unterstützen sie nicht mehr. Prüfe die Verfügbarkeit immer mit einer Feature-Erkennung, bevor du darauf zugreifst.
length ist schreibgeschützt. Eine Zuweisung wird ignoriert und löst im Strict Mode einen TypeError aus.
Ein Aufruf von item(index) mit einem Index >= length liefert null und wirft keinen Fehler. Achte deshalb auf die korrekte Schleifengrenze.
CSSValueList ist kein echtes Array: forEach und map fehlen. Nutze eine klassische for-Schleife mit length.
Im CSS Typed OM (StylePropertyMapReadOnly.getAll()) erhältst du ein echtes Array, dessen length die gleiche Aufgabe erfüllt.

Siehe auch

CSSPerspective.length CSSRuleList.length FileList.length MediaList.length NodeList.length