CSSTransformValue.entries() — Methode · JavaScript-Referenz

Signatur

CSSTransformValue.prototype.entries()

Beschreibung

CSSTransformValue gehört zur CSS Typed Object Model API und steht für eine Liste von Transformationsfunktionen wie translate(), rotate() oder scale(). Jede Funktion ist ein eigenes Objekt vom Typ CSSTransformComponent, zum Beispiel CSSTranslate, CSSRotate, CSSScale oder CSSMatrixComponent.

Die Methode entries() gibt einen Iterator zurück, der jede Komponente als Paar [index, component] liefert. Der Index ist die Position der Funktion innerhalb der Transformationskette, beginnend bei 0. Das Verhalten entspricht Array.prototype.entries(), denn CSSTransformValue ist ein Listen-Objekt (Web IDL iterable<CSSTransformComponent>).

Sinnvoll ist entries(), wenn du beim Durchlaufen einer Transformation die Position der Komponente brauchst. Das ist zum Beispiel der Fall, wenn du eine bestimmte Komponente gezielt über transform[index] ersetzen willst oder wenn die Reihenfolge der Funktionen bei der Fehlersuche wichtig ist. Die Reihenfolge ist entscheidend, weil CSS-Transformationen nacheinander angewendet werden.

Rückgabewert

Typ

Iterator<[number, CSSTransformComponent]>

Beschreibung

Ein neuer Array-Iterator. Jeder Schritt liefert ein Array mit zwei Werten: den Index (number) und die zugehörige CSSTransformComponent.

Beispiele

Komponenten eines CSSTransformValue mit Index durchlaufen

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

for (const [index, component] of transform.entries()) {
  console.log(index, component.constructor.name, component.toString());
}

0 CSSTranslate translate(10px, 20px) 1 CSSRotate rotate(45deg) 2 CSSScale scale(1.5, 1.5)

Berechnete Transformation eines Elements untersuchen

// HTML: <div id="box" style="transform: translateX(50px) rotate(30deg)"></div>
const box = document.querySelector('#box');
const transform = box.attributeStyleMap.get('transform');

if (transform instanceof CSSTransformValue) {
  for (const [i, part] of transform.entries()) {
    console.log(`Schritt ${i + 1}: ${part}`);
  }
}

Schritt 1: translate(50px, 0px) Schritt 2: rotate(30deg)

Rotation per Index gezielt ersetzen

const box = document.querySelector('#box');
const transform = box.attributeStyleMap.get('transform');

for (const [index, component] of transform.entries()) {
  if (component instanceof CSSRotate) {
    // Komponente an derselben Position ersetzen
    transform[index] = new CSSRotate(CSS.deg(90));
  }
}

box.attributeStyleMap.set('transform', transform);
console.log(box.style.transform);

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

In ein Array umwandeln

const transform = new CSSTransformValue([
  new CSSTranslate(CSS.px(5), CSS.px(5)),
  new CSSSkew(CSS.deg(10), CSS.deg(0))
]);

const pairs = [...transform.entries()].map(([i, c]) => `${i}: ${c}`);
console.log(pairs);

["0: translate(5px, 5px)", "1: skew(10deg, 0deg)"]

// Wichtig · Fallstricke

Browser-Unterstützung: Die CSS Typed OM wird von Chromium-Browsern (Chrome, Edge, Opera) ab Version 66 und von Safari ab 16.4 unterstützt. Firefox unterstützt sie nicht. Prüfe die Verfügbarkeit vorher, zum Beispiel mit if ('CSSTransformValue' in window) oder if (window.CSS && CSS.px).
Einmal-Iterator: Der zurückgegebene Iterator lässt sich nur einmal durchlaufen. Für einen weiteren Durchlauf rufst du entries() erneut auf.
Werte unterscheiden sich: Was attributeStyleMap.get() liefert, ist nicht immer dasselbe wie der Wert aus computedStyleMap().get(). Berechnete Werte werden je nach Browser normalisiert, zum Beispiel in Pixel oder in eine Matrix.
Nicht jeder Wert ist ein CSSTransformValue: Bei transform: none erhältst du einen CSSKeywordValue. Prüfe den Typ deshalb vor dem Aufruf mit instanceof CSSTransformValue.
Änderungen wirken nicht sofort: Wenn du Komponenten per transform[index] = … ersetzt, änderst du nur das Objekt. Auf dem Element sichtbar wird die Änderung erst durch attributeStyleMap.set().
Brauchst du nur die Komponenten ohne Index, reichen values() oder direkt for…of über das Objekt.

Siehe auch

Array.prototype.entries() CSSTransformValue.values() CSSTransformValue.keys() CSSTransformValue.toMatrix() CSSTransformValue.forEach()