CSS Typed Object Model API
Die CSS Typed Object Model API vereinfacht die Manipulation von CSS-Eigenschaften, indem CSS-Werte als typisierte JavaScript-Objekte statt als Zeichenketten dargestellt werden. Dies vereinfacht nicht nur die Manipulation von CSS, sondern verringert auch die negativen Auswirkungen auf die Leistung im Vergleich zu HTMLElement.style.
Im Allgemeinen können CSS-Werte in JavaScript als Zeichenketten gelesen und geschrieben werden, was langsam und umständlich sein kann. Die CSS Typed Object Model API stellt Schnittstellen zur Verfügung, um mit den zugrunde liegenden Werten zu interagieren, indem sie diese mit spezialisierten JS-Objekten darstellt, die leichter und zuverlässiger manipuliert und verstanden werden können als durch Zeichenkettenparsing und -konkatenation. Dies ist für Autoren einfacher (zum Beispiel werden numerische Werte als tatsächliche JS-Zahlen reflektiert und verfügen über einheitsspezifische mathematische Operationen). Es ist in der Regel auch schneller, da Werte direkt manipuliert und dann kostengünstig wieder in zugrunde liegende Werte übersetzt werden können, ohne Zeichenketten für CSS aufbauen und parsen zu müssen.
Die CSS Typed OM ermöglicht sowohl eine performante Manipulation von Werten, die CSS-Eigenschaften zugewiesen sind, als auch wartbaren Code, der verständlicher und leichter zu schreiben ist.
Schnittstellen
CSSStyleValue
Die CSSStyleValue-Schnittstelle der CSS Typed Object Model API ist die Basisklasse aller CSS-Werte, die über die Typed OM API zugänglich sind. Eine Instanz dieser Klasse kann überall dort verwendet werden, wo eine Zeichenkette erwartet wird.
CSSStyleValue.parse()-
Eine Methode, mit der
CSSNumericValueaus einer CSS-Zeichenkette aufgebaut werden kann. Sie setzt eine bestimmte CSS-Eigenschaft auf die angegebenen Werte und gibt den ersten Wert alsCSSStyleValue-Objekt zurück. CSSStyleValue.parseAll()-
Eine Methode, die alle Vorkommen einer bestimmten CSS-Eigenschaft auf den angegebenen Wert setzt und ein Array von
CSSStyleValue-Objekten zurückgibt, von denen jedes einen der angegebenen Werte enthält.
StylePropertyMap
Die StylePropertyMap-Schnittstelle der CSS Typed Object Model API bietet eine Darstellung eines CSS-Deklarationsblocks, der eine Alternative zu CSSStyleDeclaration darstellt.
StylePropertyMap.set()-
Eine Methode, die die CSS-Deklaration mit der angegebenen Eigenschaft auf den angegebenen Wert ändert.
StylePropertyMap.append()-
Eine Methode, die eine neue CSS-Deklaration mit der angegebenen Eigenschaft und dem Wert zur
StylePropertyMaphinzufügt. StylePropertyMap.delete()-
Eine Methode, die die CSS-Deklaration mit der angegebenen Eigenschaft aus der
StylePropertyMapentfernt. StylePropertyMap.clear()-
Eine Methode, die alle Deklarationen in der
StylePropertyMapentfernt.
CSSUnparsedValue
Die CSSUnparsedValue-Schnittstelle der CSS Typed Object Model API repräsentiert Eigenschaftswerte, die auf benutzerdefinierte Eigenschaften verweisen. Sie besteht aus einer Liste von Zeichenkettenfragmenten und Variablereferenzen.
CSSUnparsedValue()Konstruktor-
Erstellt ein neues
CSSUnparsedValue-Objekt, das Eigenschaftswerte repräsentiert, die auf benutzerdefinierte Eigenschaften verweisen. CSSUnparsedValue.entries()-
Methode, die ein Array von
[key, value]-Paaren der aufzählbaren Eigenschaften eines gegebenen Objekts in derselben Reihenfolge zurückgibt, wie es durch einefor...in-Schleife bereitgestellt wird (mit dem Unterschied, dass eine for-in-Schleife auch Eigenschaften in der Prototypkette aufzählt). CSSUnparsedValue.forEach()-
Methode, die eine bereitgestellte Funktion einmal für jedes Element des
CSSUnparsedValueausführt. CSSUnparsedValue.keys()-
Methode, die ein neues Array-Iterator-Objekt zurückgibt, das die Schlüssel für jeden Index im Array enthält.
CSSKeywordValue Serialization
Die CSSKeywordValue-Schnittstelle der CSS Typed Object Model API erstellt ein Objekt, um CSS-Schlüsselwörter und andere Bezeichner darzustellen.
CSSKeywordValue()Konstruktor-
Konstruktor erstellt ein neues
CSSKeywordValue()Objekt, das CSS-Schlüsselwörter und andere Bezeichner repräsentiert. CSSKeywordValue.value()-
Eigenschaft der
CSSKeywordValue-Schnittstelle, die den Wert derCSSKeywordValuezurückgibt oder setzt.
CSSStyleValue Schnittstellen
CSSStyleValue ist die Basisklasse, über die alle CSS-Werte ausgedrückt werden. Unterklassen sind:
CSSImageValue-
Eine Schnittstelle, die Werte für Eigenschaften repräsentiert, die ein Bild erfordern, zum Beispiel
background-image,list-style-imageoderborder-image-source. CSSKeywordValue-
Eine Schnittstelle, die ein Objekt erstellt, um CSS-Schlüsselwörter und andere Bezeichner darzustellen. Wenn sie dort verwendet wird, wo eine Zeichenkette erwartet wird, gibt sie den Wert von
CSSKeyword.valuezurück. CSSMathValue-
Ein Baum von Unterklassen, der numerische Werte darstellt, die komplizierter sind als ein einzelner Wert und eine Einheit, einschließlich:
CSSMathInvert- repräsentiert einen CSScalc()-Wert, der alscalc(1 / <value>)verwendet wird.CSSMathMax- repräsentiert die CSSmax()-Funktion.CSSMathMin- repräsentiert die CSSmin()-Funktion.CSSMathNegate- negiert den übergebenen Wert.CSSMathProduct- repräsentiert das Ergebnis, das durch das Aufrufen vonadd(),sub()odertoSum()aufCSSNumericValueerhalten wird.CSSMathSum- repräsentiert das Ergebnis, das durch das Aufrufen vonadd(),sub()odertoSum()aufCSSNumericValueerhalten wird.
CSSNumericValue-
Eine Schnittstelle, die Operationen darstellt, die alle numerischen Werte ausführen können, einschließlich:
CSSNumericValue.add- Fügt die angegebenen Zahlen zumCSSNumericValuehinzu.CSSNumericValue.sub- Subtrahiert die angegebenen Zahlen vonCSSNumericValue.CSSNumericValue.mul- Multipliziert die angegebenen Zahlen mit demCSSNumericValue.CSSNumericValue.div- Teilt dasCSSNumericValuedurch den angegebenen Wert und gibt einen Fehler aus, wenn0.CSSNumericValue.min- Gibt den minimalen übergebenen Wert zurückCSSNumericValue.max- Gibt den maximalen übergebenen Wert zurückCSSNumericValue.equals- Gibt true zurück, wenn alle Werte genau denselben Typ und Wert in derselben Reihenfolge haben. Andernfalls falseCSSNumericValue.to- Konvertiertvaluein einen anderen mit der angegebenen Einheit.CSSNumericValue.toSumCSSNumericValue.typeCSSNumericValue.parse- Gibt eine aus einer CSS-Zeichenkette geparste Zahl zurück
CSSPositionValue-
Repräsentiert Werte für Eigenschaften, die eine Position erfordern, zum Beispiel object-position.
CSSTransformValue-
Eine Schnittstelle, die eine Liste von
transform-List-Werten repräsentiert. Sie "enthalten" einen oder mehrereCSSTransformComponents, die einzelnetransform-Funktionswerte repräsentieren. CSSUnitValue-
Eine Schnittstelle, die numerische Werte darstellt, die als eine einzelne Einheit oder als benannte Zahl und Prozentsatz dargestellt werden können.
CSSUnparsedValue-
Repräsentiert Eigenschaftswerte, die auf benutzerdefinierte Eigenschaften verweisen. Es besteht aus einer Liste von Zeichenkettenfragmenten und Variablereferenzen.
Spezifikationen
| Specification |
|---|
| CSS Typed OM Level 1 # stylevalue-objects |
| CSS Typed OM Level 1 # the-stylepropertymap |
| CSS Typed OM Level 1 # cssunparsedvalue |
| CSS Typed OM Level 1 # keywordvalue-objects |