CSSFunctionDescriptors

Eingeschrnkt verfgbar

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.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Experimentell: Dies ist eine experimentelle Technologie
berprfen Sie die Browser-Kompatibilittstabelle sorgfltig vor der Verwendung auf produktiven Webseiten.

Das CSSFunctionDescriptors-Interface des CSS Object Model reprsentiert 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.

CSSStyleDeclaration CSSFunctionDescriptors

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von CSSStyleDeclaration.

CSSFunctionDescriptors.result Schreibgeschtzt: Gibt einen String zurck, der einen result-Deskriptor reprsentiert, falls einer im zugehrigen 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 heit --lighter() und gibt eine aufgehellte Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter, eine <color> und eine <number>. Sie gibt einen oklch()-Farbwert zurck, der mithilfe der relativen Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und ihr Helligkeitskanal wird um die Eingabezahl erhht.

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 durchgngige 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-Krpers entspricht, der oklch(from var(--color) calc(l + var(--lightness-adjust)) c h) ist.