CSSUnparsedValue
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 CSSUnparsedValue-Interface der CSS Typed Object Model API repräsentiert einen Eigenschaftswert, der nicht in einen spezifischeren Typ geparst werden kann — typischerweise der Wert einer benutzerdefinierten Eigenschaft.
Das Objekt ist ein Iterable, das Zeichenkettenfragmente und Variablenreferenzen enthalten kann.
Die Elemente können per Index zugegriffen und gesetzt werden (unparsedValue[0]), und als Iterable kann es mit einer for...of-Schleife oder der Spread-Syntax verwendet werden.
Konstruktor
CSSUnparsedValue()-
Erstellt ein neues
CSSUnparsedValue-Objekt.
Instanzeigenschaften
CSSUnparsedValue.lengthSchreibgeschützt-
Gibt die Anzahl der Elemente im Objekt zurück.
Instanzmethoden
Erbt auch Methoden von seinem Elterninterface, CSSStyleValue.
CSSUnparsedValue.entries()-
Gibt einen neuen Array-Iterator zurück, der
[index, value]-Paare für jedes Element im Objekt liefert. CSSUnparsedValue.forEach()-
Führt eine bereitgestellte Funktion einmal für jedes Element im Objekt aus.
CSSUnparsedValue.keys()-
Gibt einen neuen Array-Iterator zurück, der den Index jedes Elements im Objekt liefert.
CSSUnparsedValue.values()-
Gibt einen neuen Array-Iterator zurück, der jedes Element im Objekt liefert.
Beschreibung
Eine Instanz von CSSUnparsedValue ist ein Iterable von Elementen, wobei jedes Element entweder eine Zeichenkette ist, die ein Fragment von CSS-Text darstellt, das nicht weiter geparst wurde, oder ein CSSVariableReferenceValue-Objekt, das eine var()-Funktion im Wert repräsentiert (falls welche angegeben wurden).
Zum Beispiel, die benutzerdefinierte Eigenschaft:
--foo: 10px var(--bar, blue);
Das CSSUnparsedValue für --foo hat zwei Elemente:
Ein weiteres Parsen eines CSSUnparsedValue
CSSUnparsedValue bewahrt den rohen, ungeparsten Text eines Wertes: Es interpretiert diesen Text nicht als Längenwert, Farbe oder einen anderen spezifischeren Typ.
Wenn Sie wissen, welche Art von Wert der Text darstellt, können Sie ihn weiter parsen, indem Sie die statische parse()-Methode des erwarteten Typs verwenden, wie z.B. CSSNumericValue.parse() für einen numerischen Wert mit einer Einheit, oder die allgemeinere CSSStyleValue.parse(), die zusätzlich erfordert, dass Sie den Ziel-CSS-Eigenschaftsnamen angeben.
Diese parse()-Methoden benötigen einen CSS-Text-String, nicht ein CSSUnparsedValue-Objekt.
Da jedoch CSSUnparsedValue die CSSStyleValue.toString() Stringifizierungs-Methode erbt, kann es direkt überall dort übergeben werden, wo ein String erwartet wird.
Das Parsen wirft einen SyntaxError, wenn der Text nicht der von dem Typ, den Sie parsen, erwarteten Syntax entspricht.
Beispiele
Erstellen, Lesen und Aktualisieren eines CSSUnparsedValue
Dieses Beispiel erstellt ein CSSUnparsedValue, liest dann seine Elemente über length, indizierten Zugriff und Iteration und aktualisiert schließlich eines der Elemente, indem es seinem Index zugewiesen wird.
const value = new CSSUnparsedValue(["1em", "#445566", "-45px"]);
console.log(value.length); // 3
console.log(value[0]); // "1em"
for (const fragment of value) {
console.log(fragment);
}
// "1em"
// "#445566"
// "-45px"
value[0] = "2em";
console.log(value[0]); // "2em"
Lesen und Parsen des Werts einer benutzerdefinierten Eigenschaft
Ein CSSUnparsedValue ist das, was Sie zurückbekommen, wenn Sie den Wert einer benutzerdefinierten Eigenschaft von einer StylePropertyMapReadOnly lesen, da der Browser im Voraus nicht wissen kann, welche Art von Wert die Eigenschaft enthält.
Dieses Beispiel liest die benutzerdefinierte Eigenschaft --unit aus der berechneten Stilkarte eines Elements und parst sie dann in einen CSSUnitValue mit Hilfe von CSSNumericValue.parse().
<button id="btn">Styled button</button>
#btn {
--unit: 1.2rem;
padding: var(--unit);
}
const styleMap = document.getElementById("btn").computedStyleMap();
const unit = styleMap.get("--unit");
console.log(unit); // CSSUnparsedValue {0: " 1.2rem", length: 1}
console.log(unit[0]); // " 1.2rem"
const parsedUnit = CSSNumericValue.parse(unit);
console.log(parsedUnit.value); // 1.2
console.log(parsedUnit.unit); // "rem"
Siehe den Abschnitt CSSUnparsedValue des CSS Typed OM Leitfadens für mehr Details zu diesem Beispiel.
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # cssunparsedvalue |