CSSFunctionDescriptors

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die Schnittstelle CSSFunctionDescriptors des CSS Object Model repräsentiert die Deskriptoren in einem Satz von CSS-Deklarationen, der durch ein CSSFunctionDeclarations-Objekt dargestellt wird.

Auf ein CSSFunctionDescriptors-Objekt wird über die Eigenschaft CSSFunctionDeclarations.style zugegriffen.

Instanzeigenschaften

Diese Schnittstelle erbt außerdem Eigenschaften von CSSStyleDeclaration.

CSSFunctionDescriptors.result Schreibgeschützt: Gibt eine Zeichenfolge zurück, die einen result-Deskriptor repräsentiert, sofern einer im zugehörigen Satz von Deklarationen vorhanden ist.

Beispiele

Grundlegende Verwendung von `CSSFunctionDescriptors`

In diesem Beispiel definieren wir eine benutzerdefinierte CSS-Funktion und greifen anschließend über das CSSOM auf ihre Deklarationen zu.

CSS

Unser CSS definiert mit der @function-At-Regel eine benutzerdefinierte Funktion. Die Funktion heißt --lighter() und gibt eine aufgehellte Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter: einen <color>-Wert und einen <number>-Wert. Sie gibt eine oklch()-Farbe zurück, die mithilfe der Syntax für relative Farben erstellt wird: Die Eingabefarbe wird in eine oklch()-Farbe umgewandelt, und ihr Helligkeitskanal wird um die eingegebene Zahl erhöht.

css

@function --lighter(--color <color>, --lightness-adjust <number>: 0.2) returns
  <color> {
  result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);
}

JavaScript

Unser Skript ruft zunächst über HTMLStyleElement.sheet eine Referenz auf das mit dem Dokument verknüpfte Stylesheet ab. Anschließend ruft es über CSSStylesheet.cssRules eine Referenz auf die einzige Regel im Stylesheet ab: die CSSFunctionRule.

Danach greifen wir über cssRules[0] auf das CSSFunctionDeclarations-Objekt zu, das die einzige zusammenhängende Folge von Deklarationen innerhalb der Funktion repräsentiert. Über CSSFunctionDeclarations.style greifen wir auf die Informationen zu ihren Deskriptoren zu und lesen anschließend die Style-Informationen des Deskriptors aus. Alle diese Informationen werden in der Konsole ausgegeben.

// Get a CSSFunctionRule
const cssFunc = document.getElementById("css-output").sheet.cssRules[0];

// Accessing CSSFunctionDeclarations and CSSFunctionDescriptors
console.log(cssFunc.cssRules[0]); // CSSFunctionDeclarations
console.log(cssFunc.cssRules[0].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[0].style.result);

Bemerkenswert ist vor allem, dass die Eigenschaft result dem result-Deskriptor im Rumpf der @function-Regel entspricht: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h).