CSSTransformValue.length — Eigenschaft · JavaScript-Referenz

Signatur

get CSSTransformValue.prototype.length

Beschreibung

Die schreibgeschützte Eigenschaft length des Interfaces CSSTransformValue liefert die Anzahl der enthaltenen CSSTransformComponent-Objekte. Jede einzelne Transformationsfunktion eines transform-Werts, also etwa translate(), rotate(), scale() oder matrix(), zählt als ein Element.

Ein CSSTransformValue ist ein listenartiges Objekt. Mit length und dem Indexzugriff (value[0], value[1] …) lässt es sich wie ein Array durchlaufen. Zusätzlich ist es iterierbar und bietet forEach(), entries(), keys() und values(). Mit length prüfen Sie z. B., ob ein Element überhaupt transformiert ist, oder Sie greifen gezielt auf die letzte Transformation zu.

Einen CSSTransformValue erhalten Sie typischerweise über element.computedStyleMap().get('transform') bzw. element.attributeStyleMap.get('transform') oder direkt mit dem Konstruktor new CSSTransformValue([...]).

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative Ganzzahl: die Anzahl der CSSTransformComponent-Einträge in der Liste.

Beispiele

Anzahl der Komponenten eines selbst erzeugten Transform-Werts

const transform = new CSSTransformValue([
  new CSSTranslate(CSS.px(10), CSS.px(20)),
  new CSSRotate(CSS.deg(45)),
  new CSSScale(1.5, 1.5)
]);

console.log(transform.length);
console.log(transform.toString());

3 translate(10px, 20px) rotate(45deg) scale(1.5, 1.5)

Inline-Transform eines Elements auslesen und durchlaufen

const box = document.querySelector('.box');
box.style.transform = 'translateX(50px) rotate(10deg)';

const value = box.attributeStyleMap.get('transform');

if (value instanceof CSSTransformValue) {
  for (let i = 0; i < value.length; i++) {
    console.log(i, value[i].constructor.name, value[i].toString());
  }
}

0 CSSTranslate translateX(50px) 1 CSSRotate rotate(10deg)

Letzte Transformation gezielt anpassen

const el = document.querySelector('#card');
el.attributeStyleMap.set('transform',
  new CSSTransformValue([
    new CSSTranslate(CSS.px(0), CSS.px(0)),
    new CSSRotate(CSS.deg(0))
  ])
);

const t = el.attributeStyleMap.get('transform');
const last = t[t.length - 1];
if (last instanceof CSSRotate) {
  last.angle = CSS.deg(90);
  el.attributeStyleMap.set('transform', t);
}
console.log(el.style.transform);

translate(0px, 0px) rotate(90deg)

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an length hat keine Wirkung (im Strict Mode wird ein TypeError geworfen). Anders als bei Arrays lässt sich die Liste so nicht kürzen. Erzeugen Sie stattdessen einen neuen CSSTransformValue.
Kein leerer Wert: Der Konstruktor verlangt mindestens eine Komponente, sonst wirft er einen TypeError. length ist daher immer ≥ 1. Bei transform: none liefert get('transform') einen CSSKeywordValue statt eines CSSTransformValue. Prüfen Sie deshalb vorher mit instanceof.
Berechnete Werte: Wie computedStyleMap() Transformationen zurückgibt, ist nicht einheitlich. Je nach Browser erhalten Sie die ursprünglichen Einzelfunktionen oder eine zusammengefasste Matrix, und length kann entsprechend abweichen.
Kompatibilität: CSS Typed OM wird von Chromium-Browsern (seit Version 66) und Safari (seit 16.4) unterstützt, von Firefox bisher nicht. Nutzen Sie eine Feature-Erkennung, etwa 'CSSTransformValue' in window.

Siehe auch

CSSTransformValue CSSTransformValue.is2D CSSTransformValue.toMatrix() CSSTransformValue.forEach() CSSTransformComponent Element.computedStyleMap() CSSStyleDeclaration.length