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 innerhalb einer Reihe von CSS-Deklarationen enthalten sind, die durch ein CSSFunctionDeclarations-Objekt dargestellt werden.

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

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von CSSStyleDeclaration.

CSSFunctionDescriptors.result Schreibgeschützt Experimentell: Gibt eine Zeichenfolge zurück, die einen result-Deskriptor repräsentiert, falls einer in der zugehörigen Deklarationsmenge vorhanden ist.

Beispiele

Grundlegende Verwendung von `CSSFunctionDescriptors`

In diesem Beispiel definieren wir eine CSS-Benutzerfunktion und greifen dann mit dem CSSOM auf ihre Deklarationen zu.

CSS

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 unter Verwendung der relativen Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch() Farbe umgewandelt und ihr Helligkeitskanal wird um die Eingabenummer 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 verknüpfte Stylesheet über HTMLStyleElement.sheet zu erhalten, und 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 zusammenhängende Reihe von Deklarationen innerhalb der Funktion repräsentiert, indem wir cssRules[0] verwenden, greifen mit CSSFunctionDeclarations.style auf die Deskriptorinformationen zu und greifen dann auf die Deskriptor-Stilinformationen zu. Alle diese Informationen werden in der Konsole protokolliert.

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

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