CSS Typed Object Model API
Die CSS Typed Object Model API vereinfacht die Manipulation von CSS-Eigenschaften, indem CSS-Werte als typisierte JavaScript-Objekte anstatt als Strings bereitgestellt werden. Dies vereinfacht nicht nur die CSS-Manipulation, sondern verringert auch den negativen Einfluss auf die Leistung im Vergleich zu HTMLElement.style
.
Im Allgemeinen können CSS-Werte in JavaScript als Zeichenfolgen gelesen und geschrieben werden, was langsam und umständlich sein kann. Die CSS Typed Object Model API bietet Schnittstellen, um mit den zugrundeliegenden Werten zu interagieren, indem sie diese mit spezialisierten JS-Objekten darstellt, die einfacher und zuverlässiger zu manipulieren und zu verstehen sind als String-Parsing und -Verkettung. Dies ist für Autoren einfacher (zum Beispiel werden numerische Werte mit tatsächlichen JS-Zahlen widergespiegelt und haben einheitenbewusste mathematische Operationen, die für sie definiert sind). Es ist auch allgemein schneller, da Werte direkt manipuliert werden können und dann günstig in die zugrundeliegenden Werte zurückübersetzt werden können, ohne Zeichenfolgen von CSS erstellen und analysieren zu müssen.
Die CSS Typed OM ermöglicht sowohl die performante Manipulation von Werten, die CSS-Eigenschaften zugewiesen sind, als auch die Erstellung von wartbarem Code, der sowohl verständlicher als auch einfacher 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 verwendet werden, wo eine Zeichenfolge erwartet wird.
CSSStyleValue.parse()
-
Die parse()-Methode der CSSStyleValue-Schnittstelle erlaubt es, einen CSSNumericValue aus einer CSS-Zeichenfolge zu konstruieren. Sie setzt eine bestimmte CSS-Eigenschaft auf die angegebenen Werte und gibt den ersten Wert als ein CSSStyleValue-Objekt zurück.
CSSStyleValue.parseAll()
-
Die parseAll()-Methode der CSSStyleValue-Schnittstelle setzt alle Vorkommen einer bestimmten CSS-Eigenschaft auf den angegebenen Wert und gibt ein Array von CSSStyleValue-Objekten zurück, die jeweils einen der bereitgestellten Werte enthalten.
StylePropertyMap
Die StylePropertyMap
-Schnittstelle der CSS Typed Object Model API bietet eine Darstellung eines CSS-Deklarationsblocks, der eine Alternative zu CSSStyleDeclaration darstellt.
StylePropertyMap.set()
-
Methode der StylePropertyMap-Schnittstelle, die die CSS-Deklaration mit der angegebenen Eigenschaft auf den angegebenen Wert ändert.
StylePropertyMap.append()
-
Methode, die eine neue CSS-Deklaration zur StylePropertyMap mit der angegebenen Eigenschaft und dem Wert hinzufügt.
StylePropertyMap.delete()
-
Methode, die die CSS-Deklaration mit der angegebenen Eigenschaft von der StylePropertyMap entfernt.
StylePropertyMap.clear()
-
Methode, die alle Deklarationen in der StylePropertyMap entfernt.
CSSUnparsedValue
Die CSSUnparsedValue
-Schnittstelle der CSS Typed Object Model API repräsentiert Eigenschaftswerte, die sich auf benutzerdefinierte Eigenschaften beziehen. Sie besteht aus einer Liste von Zeichenfolgenfragmenten und Variablenreferenzen.
CSSUnparsedValue()
-Konstruktor-
Erstellt ein neues CSSUnparsedValue-Objekt, das Eigenschaftswerte repräsentiert, die sich auf benutzerdefinierte Eigenschaften beziehen.
CSSUnparsedValue.entries()
-
Methode, die ein Array der eigenen aufzählbaren [Schlüssel, Wert]-Paare eines gegebenen Objekts in derselben Reihenfolge wie von einer for...in-Schleife bereitstellt (mit dem Unterschied, dass eine for-in-Schleife auch Eigenschaften in der Prototypenkette aufzählt).
CSSUnparsedValue.forEach()
-
Methode, die eine bereitgestellte Funktion einmal für jedes Element des CSSUnparsedValue ausfü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
Serialisierung
Die CSSKeywordValue
-Schnittstelle der CSS Typed Object Model API erstellt ein Objekt, um CSS-Schlüsselwörter und andere Bezeichner darzustellen.
CSSKeywordValue()
-Konstruktor-
Der Konstruktor erzeugt ein neues
CSSKeywordValue()
-Objekt, das CSS-Schlüsselwörter und andere Bezeichner repräsentiert. CSSKeywordValue.value()
-
Eigenschaft der CSSKeywordValue-Schnittstelle, die den Wert des CSSKeywordValue zurückgibt oder setzt.
CSSStyleValue Schnittstellen
CSSStyleValue ist die Basisklasse, durch die alle CSS-Werte ausgedrückt werden. Zu den Unterklassen gehören:
CSSImageValue
-Objekte-
Eine Schnittstelle, die Werte für Eigenschaften darstellt, die ein Bild übernehmen, zum Beispiel
background-image
,list-style-image
oderborder-image-source
. CSSKeywordValue
-
Eine Schnittstelle, die ein Objekt erstellt, um CSS-Schlüsselwörter und andere Bezeichner darzustellen. Wenn sie an einer Stelle verwendet wird, an der eine Zeichenfolge erwartet wird, gibt sie den Wert von CSSKeyword.value zurü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 in Form voncalc(1 / <value>)
.CSSMathMax
- Repräsentiert die CSS-Funktionmax()
.CSSMathMin
- Repräsentiert die CSS-Funktionmin()
.CSSMathNegate
- Negiert den an sie übergebenen Wert.CSSMathProduct
- Repräsentiert das Ergebnis, das durch den Aufruf vonadd()
,sub()
odertoSum()
aufCSSNumericValue
erzielt wird.CSSMathSum
- Repräsentiert das Ergebnis, das durch den Aufruf vonadd()
,sub()
odertoSum()
aufCSSNumericValue
erzielt wird.
CSSNumericValue
-
Eine Schnittstelle, die Operationen darstellt, die alle numerischen Werte ausführen können, einschließlich:
CSSNumericValue.add
- Fügt derCSSNumericValue
angegebene Zahlen hinzu.CSSNumericValue.sub
- Subtrahiert die angegebenen Zahlen zurCSSNumericValue
.CSSNumericValue.mul
- Multipliziert die angegebenen Zahlen zurCSSNumericValue
.CSSNumericValue.div
- Teilt eine angegebene Zahl durch andere, erzeugt einen Fehler, wenn 0.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 vom exakt gleichen Typ und Wert in der gleichen Reihenfolge sind. Andernfalls falseCSSNumericValue.to
- Konvertiertvalue
in einen anderen Wert mit der angegebenen Einheit.CSSNumericValue.toSum
CSSNumericValue.type
CSSNumericValue.parse
- Gibt eine nummerierte Zahl aus einem CSS-String zurück
CSSPositionValue
-
Repräsentiert Werte für Eigenschaften, die eine Position einnehmen, zum Beispiel object-position.
CSSTransformValue
-
Eine Schnittstelle, die eine Liste von
transform
-Listwerten darstellt. Sie "beinhalten" einen oder mehrereCSSTransformComponent
s, die einzelnetransform
-Funktionswerte darstellen. CSSUnitValue
-
Eine Schnittstelle, die numerische Werte darstellt, die als eine einzige Einheit oder als ein benannter Zahl- und Prozentsatz dargestellt werden können.
CSSUnparsedValue
-
Repräsentiert Eigenschaftswerte, die sich auf benutzerdefinierte Eigenschaften beziehen. Sie besteht aus einer Liste von Zeichenfolgenfragmenten und Variablenreferenzen.
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 |
Browser-Kompatibilität
api.CSSStyleValue
BCD tables only load in the browser
api.StylePropertyMap
BCD tables only load in the browser
api.CSSUnparsedValue
BCD tables only load in the browser
api.CSSKeywordValue
BCD tables only load in the browser