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.
Die CSSTransformValue-Schnittstelle der CSS Typed Object Model API stellt transform-list-Werte dar, wie sie von der CSS-Eigenschaft transform verwendet werden.
Sie ist ein Iterierbares aus CSSTransformComponent-Objekten, von denen jedes eine einzelne <transform-function> darstellt.
Auf die Elemente kann per Index (transformValue[0]) zugegriffen werden, und sie können per Index gesetzt werden. Als Iterierbares kann es 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 seiner übergeordneten Schnittstelle 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, etwa CSSScale oder CSSTranslate, das ein einzelnes Objekt einer Transformationsfunktion darstellt.
Der Konstruktor CSSTransformValue() löst einen TypeError aus, wenn ihm ein leeres Array übergeben wird — ein CSSTransformValue enthält immer mindestens eine Komponente.
CSSTransformValue.is2D ist nur dann true, wenn das jeweilige is2D jeder Komponente true ist; falls eine Komponente eine 3D-Transformation ist, wird der gesamte CSSTransformValue als 3D behandelt.
Beispiele
Erstellen, Lesen und Aktualisieren eines CSSTransformValue
Dieses Beispiel erstellt einen CSSTransformValue, liest dann seine Elemente über length, indizierten Zugriff und Iteration und ersetzt schließlich eines der Elemente durch Zuweisung an dessen 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)"
Lesen einer Transformation aus einer berechneten Style-Map
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 |