CSSTransformValue
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Das CSSTransformValue-Interface der CSS Typed Object Model API stellt transform-list-Werte dar, wie sie von der CSS-Eigenschaft transform verwendet werden.
Es ist ein iterierbares Objekt aus CSSTransformComponent-Objekten, wobei jedes eine einzelne <transform-function> darstellt.
Auf die Elemente kann per Index zugegriffen und sie können per Index gesetzt werden (transformValue[0]). Als iterierbares Objekt kann es zudem mit einer for...of-Schleife oder der Spread-Syntax verwendet werden.
Konstruktor
CSSTransformValue()-
Erstellt ein neues
CSSTransformValue-Objekt.
Instanzeigenschaften
CSSTransformValue.lengthSchreibgeschützt-
Gibt die Anzahl der Elemente im Objekt zurück.
CSSTransformValue.is2DSchreibgeschützt-
Gibt einen booleschen Wert zurück, der angibt, ob die Transformation 2D oder 3D ist.
Instanzmethoden
Erbt außerdem Methoden von seinem übergeordneten Interface CSSStyleValue.
CSSTransformValue.toMatrix()-
Gibt ein neues
DOMMatrix-Objekt zurück. CSSTransformValue.entries()-
Gibt einen neuen Array-Iterator zurück, der für jedes Element im Objekt
[index, value]-Paare liefert. CSSTransformValue.forEach()-
Führt eine bereitgestellte Funktion einmal für jedes Element im Objekt aus.
CSSTransformValue.keys()-
Gibt einen neuen Array-Iterator zurück, der den Index jedes Elements im Objekt liefert.
CSSTransformValue.values()-
Gibt einen neuen Array-Iterator zurück, der jedes Element im Objekt liefert.
Beschreibung
Jedes Element in einem CSSTransformValue ist ein von CSSTransformComponent abgeleitetes Objekt, beispielsweise ein CSSScale oder CSSTranslate, das ein einzelnes transform function-Objekt darstellt.
Der Konstruktor CSSTransformValue() löst einen TypeError aus, wenn er ein leeres Array erhält – ein CSSTransformValue enthält immer mindestens eine Komponente.
CSSTransformValue.is2D ist nur dann true, wenn das eigene is2D jeder Komponente true ist; wenn eine Komponente eine 3D-Transformation ist, wird der gesamte CSSTransformValue als 3D behandelt.
Beispiele
Erstellen, Lesen und Aktualisieren eines CSSTransformValue
Dieses Beispiel erstellt ein CSSTransformValue, liest dann dessen Elemente über length, indexierten Zugriff und Iteration und ersetzt schließlich eines der Elemente durch Zuweisung an seinen Index.
const transform = new CSSTransformValue([
new CSSTranslate(CSS.px(10), CSS.px(20)),
new CSSScale(2, 3),
]);
console.log(transform.length); // 2
console.log(transform[0].toString()); // "translate(10px, 20px)"
for (const component of transform) {
console.log(component.toString());
}
// "translate(10px, 20px)"
// "scale(2, 3)"
transform[1] = new CSSScale(4, 5);
console.log(transform[1].toString()); // "scale(4, 5)"
Eine Transformation aus einer berechneten Style-Map lesen
Eine CSSTransformValue-Instanz wird zurückgegeben, wenn Sie den Wert der Eigenschaft transform aus einem StylePropertyMapReadOnly lesen.
Dieses Beispiel liest das berechnete transform einer Schaltfläche, die mit transform: scale(0.95) formatiert ist.
Weitere Details zu diesem Beispiel finden Sie im Abschnitt CSSTransformValue mit CSSScale des CSS Typed OM-Leitfadens.
<button id="btn">Styled button</button>
#btn {
display: inline-block;
transform: scale(0.95);
}
const styleMap = document.getElementById("btn").computedStyleMap();
const transform = styleMap.get("transform");
console.log(transform); // CSSTransformValue {0: CSSScale, length: 1, is2D: true}
console.log(transform.length); // 1
console.log(transform[0].x); // CSSUnitValue {value: 0.95, unit: "number"}
console.log(transform.is2D); // true
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # transformvalue-objects |