CSSFunctionDescriptors

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

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

Ein CSSFunctionDescriptors-Objekt wird über die CSSFunctionDeclarations.style-Eigenschaft abgerufen.

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von CSSStyleDeclaration.

CSSFunctionDescriptors.result Schreibgeschützt Experimentell: Gibt einen String zurück, der einen result-Deskriptor repräsentiert, falls einer im zugehörigen Deklarationssatz existiert.

Beispiele

Grundlegende Verwendung von `CSSFunctionDescriptors`

In diesem Beispiel definieren wir eine benutzerdefinierte CSS-Funktion und greifen dann mit dem CSSOM auf deren Deklarationen zu.

CSS

Unser CSS definiert eine benutzerdefinierte Funktion mit der @function-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 einen oklch()-Farbwert zurück, der mithilfe der relativen Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und ihr Helligkeitskanal wird um die Eingabezahl 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 beginnt damit, eine Referenz auf das mit unserem Dokument verbundene Stylesheet über HTMLStyleElement.sheet zu erhalten. Danach holen wir eine Referenz auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules.

Wir greifen dann auf das CSSFunctionDeclarations-Objekt zu, das die einzige durchgängige Folge von Deklarationen innerhalb der Funktion darstellt, indem wir cssRules[0] verwenden, greifen auf die Informationen des Deskriptoren über CSSFunctionDeclarations.style zu und greifen dann auf die Style-Informationen des Deskriptoren zu. All diese Informationen werden in die Konsole geloggt.

// 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);

Am bemerkenswertesten ist, dass die result-Eigenschaft dem result-Deskriptor des @function-Körpers entspricht, der oklch(from var(--color) calc(l + var(--lightness-adjust)) c h) ist.