CSS Typed Object Model API
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die CSS Typed Object Model API vereinfacht die Manipulation von CSS-Eigenschaften, indem CSS-Werte als typisierte JavaScript-Objekte anstatt als Strings dargestellt werden. Dies vereinfacht nicht nur die CSS-Manipulation, sondern verringert auch den negativen Leistungseinfluss im Vergleich zu HTMLElement.style.
In der Regel können CSS-Werte in JavaScript als Zeichenketten gelesen und geschrieben werden, was langsam und mühsam 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 manipuliert und verstanden werden können als durch das Parsen und Zusammensetzen von Strings. Dies ist für die Autoren einfacher (zum Beispiel werden numerische Werte mit tatsächlichen JS-Zahlen reflektiert und es sind einheitenbewusste mathematische Operationen für sie definiert). Es ist auch allgemein schneller, da Werte direkt manipuliert und dann kostengünstig in die zugrundeliegenden Werte zurückübersetzt werden können, ohne dass zuerst CSS-Strings erstellt und dann geparst werden müssen.
Die CSS Typed OM ermöglicht sowohl die performante Manipulation von Werten, die CSS-Eigenschaften zugewiesen sind, als auch die Pflege von Code, der sowohl verständlicher als auch leichter zu schreiben ist.
Schnittstellen
CSSStyleValue
Die CSSStyleValue-Schnittstelle der CSS Typed Object Model API ist die Basisklasse aller durch die Typed OM API zugänglichen CSS-Werte. Eine Instanz dieser Klasse kann überall dort verwendet werden, wo ein String erwartet wird.
CSSStyleValue.parse()-
Methode, die es ermöglicht,
CSSNumericValueaus einem CSS-String zu konstruieren. Sie setzt eine bestimmte CSS-Eigenschaft auf die angegebenen Werte und gibt den ersten Wert alsCSSStyleValue-Objekt zurück. CSSStyleValue.parseAll()-
Methode, die alle Vorkommen einer bestimmten CSS-Eigenschaft auf den angegebenen Wert setzt und ein Array von
CSSStyleValue-Objekten zurückgibt, wobei jedes ein geliefertes Wert 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()-
Methode, die die CSS-Deklaration mit der gegebenen Eigenschaft auf den angegebenen Wert ändert.
StylePropertyMap.append()-
Methode, die eine neue CSS-Deklaration mit der angegebenen Eigenschaft und dem angegebenen Wert zur
StylePropertyMaphinzufügt. StylePropertyMap.delete()-
Methode, die die CSS-Deklaration mit der gegebenen Eigenschaft aus der
StylePropertyMapentfernt. StylePropertyMap.clear()-
Methode, die alle Deklarationen in der
StylePropertyMapentfernt.
CSSUnparsedValue
Die CSSUnparsedValue-Schnittstelle der CSS Typed Object Model API stellt Eigenschaftswerte dar, die auf benutzerdefinierte Eigenschaften verweisen. Sie besteht aus einer Liste von String-Fragmenten und Variablenreferenzen.
CSSUnparsedValue()-Konstruktor-
Erstellt ein neues
CSSUnparsedValue-Objekt, das Eigenschaftswerte darstellt, die auf benutzerdefinierte Eigenschaften verweisen. CSSUnparsedValue.entries()-
Methode, die ein Array der eigenen aufzählbaren Eigenschafts-[key, value]-Paare eines gegebenen Objekts in der gleichen Reihenfolge wie in einer
for...in-Schleife zurückgibt (der Unterschied besteht darin, 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 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 erstellt ein neues
CSSKeywordValue()-Objekt, das CSS-Schlüsselwörter und andere Bezeichner darstellt. CSSKeywordValue.value()-
Eigenschaft der
CSSKeywordValue-Schnittstelle, die den Wert desCSSKeywordValuezurückgibt oder setzt.
CSSStyleValue Schnittstellen
CSSStyleValue ist die Basisklasse, durch die alle CSS-Werte ausgedrückt werden. Unterklassen umfassen:
CSSImageValue-
Eine Schnittstelle, die Werte für Eigenschaften darstellt, die ein Bild annehmen, beispielsweise
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 ein String erwartet wird, gibt sie den Wert von
CSSKeyword.valuezurück. CSSMathValue-
Ein Baum von Unterklassen, die numerische Werte repräsentieren, die komplizierter sind als ein einzelner Wert und eine Einheit, einschließlich:
CSSMathMax- repräsentiert die CSS-max()-Funktion.CSSMathMin- repräsentiert die CSS-min()-Funktion.CSSMathClamp- repräsentiert die CSS-clamp()-Funktion.CSSMathNegate- negiert den ihm übergebenen Wert.CSSMathInvert- repräsentiert einen CSS-calc()-Wert, der alscalc(1 / <value>)verwendet wird. Dieser Typ wird intern durchdiv()verwendet, um ein entsprechendesCSSMathProductzu erstellen.CSSMathProduct- repräsentiert das Ergebnis, das durch Aufruf vonmul()oderdiv()aufCSSNumericValueerhalten wird.CSSMathSum- repräsentiert das Ergebnis, das durch Aufruf 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 vomCSSNumericValue.CSSNumericValue.mul- Multipliziert die angegebenen Zahlen mit demCSSNumericValue.CSSNumericValue.div- Dividiert dasCSSNumericValuedurch den angegebenen Wert und wirft einen Fehler, wenn0.CSSNumericValue.min- Gibt den kleinsten übergebenen Wert zurück.CSSNumericValue.max- Gibt den größten übergebenen Wert zurück.CSSNumericValue.equals- Gibt true zurück, wenn alle Werte den exakt gleichen Typ und Wert in der gleichen Reihenfolge haben. Andernfalls false.CSSNumericValue.to- Konvertiertvaluein einen anderen mit der angegebenen Einheit.CSSNumericValue.toSumCSSNumericValue.typeCSSNumericValue.parse- Gibt eine Zahl zurück, die aus einem CSS-String geparst wurde.
CSSPositionValue-
Repräsentiert Werte für Eigenschaften, die eine Position annehmen, zum Beispiel object-position.
CSSTransformValue-
Eine Schnittstelle, die eine Liste von
transform-Listenwerten darstellt. Sie "enthält" ein oder mehrereCSSTransformComponents, die einzelnetransform-Funktionswerte repräsentieren. CSSUnitValue-
Eine Schnittstelle, die numerische Werte darstellt, die als eine einzelne Einheit oder eine benannte Zahl und Prozentsatz dargestellt werden können.
CSSUnparsedValue-
Repräsentiert Eigenschaftswerte, die auf benutzerdefinierte Eigenschaften verweisen. Sie besteht aus einer Liste von String-Fragmenten und Variablenreferenzen.
Spezifikationen
| Spezifikation |
|---|
| 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 |