Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das CSSFunctionDeclarations-Interface des CSS Object Model repräsentiert eine zusammenhängende Folge von CSS-Deklarationen, die in einem @function-Körper enthalten sind.
Dies kann CSS-Benutzerdefinierte Eigenschaften und den Wert des results Deskriptors innerhalb des @function Körpers einschließen, aber es umfasst keine Blöcke wie @media At-Regeln, die enthalten sein können. Ein solcher Block, der in der Mitte einer Reihe von Deklarationen enthalten ist, würde dazu führen, dass die Körperinhalte in separate CSSFunctionDeclarations-Objekte aufgeteilt werden, wie in unserem Mehrere CSSFunctionDeclarations-Beispiel gezeigt wird.
CSSRule CSSFunctionDeclarationsDieses Interface erbt auch Eigenschaften von CSSRule.
CSSFunctionDeclarations.style SchreibgeschütztGibt ein CSSFunctionDescriptors-Objekt zurück, das die Deskriptoren repräsentiert, die in einem @function-Körper verfügbar sind.
In diesem Beispiel definieren wir eine benutzerdefinierte CSS-Funktion und greifen dann mit der CSSOM auf ihre Deklarationen zu.
Unser CSS definiert eine benutzerdefinierte Funktion mit der @function At-Regel. Die Funktion heißt --lighter() und gibt eine aufgehellte Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter, eine <color> und eine <number>. Sie gibt eine oklch()-Farbe zurück, die mit Hilfe der relativen Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und ihr Helligkeitskanal wird um die Eingabezahl erhöht.
Wir haben auch eine lokale benutzerdefinierte Eigenschaft innerhalb der Funktion, --someVar, eingefügt, die nicht verwendet wird, aber illustriert, was passiert, wenn mehrere Deklarationen kontinuierlich innerhalb des @function-Körpers verfügbar sind.
Unser Skript beginnt damit, eine Referenz auf das Stylesheet, das an unser Dokument angehängt ist, mit HTMLStyleElement.sheet zu erhalten, dann eine Referenz auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules.
Wir greifen dann auf das CSSFunctionDeclarations-Objekt zu, das die einzige kontinuierliche Folge von Deklarationen innerhalb der Funktion repräsentiert, indem wir cssRules[0] verwenden, greifen auf die Deskriptorinformationen mit CSSFunctionDeclarations.style zu und greifen dann auf die Länge des Deskriptors und die Stilinformationen zu. Alle diese Informationen werden in der Konsole protokolliert.
Besonders bemerkenswert:
In diesem Beispiel zeigen wir, wie eine @media-At-Regel, die in der Mitte einer Reihe von Deklarationen eingefügt wird, zwei CSSFunctionDeclarations-Objekte generiert.
Unser CSS zeigt ein @function-Beispiel aus der Spezifikation, --bar(), das nicht viel tut, aber eine Reihe von Deklarationen aufweist, die durch einen @media-Block getrennt sind.
Unser Skript beginnt damit, eine Referenz auf das Stylesheet, das an unser Dokument angehängt ist, über HTMLStyleElement.sheet zu erhalten, dann eine Referenz auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules.
Wir greifen dann auf die CSSGroupingRule.cssRules zu und protokollieren deren Wert in der Konsole. Dies gibt ein CSSRuleList-Objekt zurück, das drei Objekte enthält:
Wir protokollieren dann einige Details jedes CSSFunctionDeclarations-Objekts in der Konsole — das Objekt selbst, das CSSFunctionDescriptors-Objekt, das in seiner style-Eigenschaft enthalten ist, und die CSSFunctionDescriptors.result Eigenschaft.
Im zweiten Fall gibt result eine leere Zeichenfolge zurück, weil der zweite Deklarationsabschnitt keinen result-Deskriptor enthält.
| CSS Functions and Mixins Module # the-function-declarations-interface |
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
Der Bauplan für ein besseres Internet.
Besuche die gemeinnützige Muttergesellschaft der Mozilla Corporation, die Mozilla Foundation.
Teile dieses Inhalts sind ©1998–2026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter einer Creative-Commons-Lizenz.