CSSFunctionDeclarations

Instanz-Eigenschaften

Diese Schnittstelle erbt auch Eigenschaften von CSSRule.

CSSFunctionDeclarations.style Schreibgeschützt

Gibt ein CSSFunctionDescriptors-Objekt zurück, das die Deskriptoren im Körper einer @function repräsentiert.

Beispiele

Grundlegende Verwendung von CSSFunctionDeclarations

In diesem Beispiel definieren wir eine benutzerdefinierte CSS-Funktion und greifen dann auf ihre Deklarationen mithilfe des CSSOM zu.

CSS

Unser CSS definiert eine benutzerdefinierte Funktion mit dem @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 relativer Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und ihr Helligkeitskanal wird um die Eingabezahl erhöht.

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

Wir haben auch eine lokale benutzerdefinierte Eigenschaft innerhalb der Funktion eingebaut, --someVar, die nicht verwendet wird, aber veranschaulicht, was passiert, wenn mehrere Deklarationen kontinuierlich innerhalb des @function-Körpers vorhanden sind.

JavaScript

Unser Skript beginnt mit dem Abrufen einer Referenz auf das mit unserem Dokument verbundene Stylesheet über Document.styleSheets, dann mit dem Abrufen einer Referenz auf die einzige Regel im Stylesheet, der CSSFunctionRule — über CSSStylesheet.cssRules.

Dann greifen wir auf das CSSFunctionDeclarations-Objekt zu, das die einzige zusammenhängende Folge von Deklarationen innerhalb der Funktion darstellt, verwenden cssRules[0], greifen auf die Informationen seines Deskriptors über CSSFunctionDeclarations.style zu und greifen dann auf die Länge des Deskriptors und die Stilinformationen zu. All diese Informationen werden in der Konsole protokolliert.

// Get a CSSFunctionRule
const sheet = document.styleSheets[0];
const cssFunc = 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.length);
console.log(cssFunc.cssRules[0].style.result);

Besonders bemerkenswert:

• Die length-Eigenschaft ist gleich 2, da der Text des Deskriptors aus zwei Teilen besteht (--someVar: 100; und result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);).
• Die result-Eigenschaft entspricht dem result-Descriptor des @function-Körpers, der oklch(from var(--color) calc(l + var(--lightness-adjust)) c h) ist.

Mehrere CSSFunctionDeclarations

In diesem Beispiel zeigen wir, wie eine @media-At-Regel, die in der Mitte einer Reihe von Deklarationen eingefügt ist, dazu führt, dass zwei CSSFunctionDeclarations-Objekte erzeugt werden.

CSS

Unser CSS zeigt ein @function-Beispiel aus der Spezifikation, --bar(), das nicht viel macht, aber eine Reihe von Deklarationen enthält, die durch einen @media-Block getrennt sind.

@function --bar() {
  --x: 42;
  result: var(--y);
  @media (width > 1000px) {
    /* ... */
  }
  --y: var(--x);
}

JavaScript

Unser Skript beginnt mit dem Abrufen einer Referenz auf das mit unserem Dokument verbundene Stylesheet über Document.styleSheets, dann mit dem Abrufen einer Referenz auf die einzige Regel im Stylesheet, der CSSFunctionRule — über CSSStylesheet.cssRules.

Dann greifen wir auf die CSSGroupingRule.cssRules zu und protokollieren ihren Wert in der Konsole. Dies gibt ein CSSRuleList-Objekt zurück, das drei Objekte enthält:

• Ein CSSFunctionDeclarations-Objekt, das den Abschnitt --x: 42;result: var(--y); darstellt.
• Ein CSSMediaRule-Objekt, das die @media-At-Regel darstellt.
• Ein zweites CSSFunctionDeclarations-Objekt, das den Abschnitt --y: var(--x); darstellt.

// Get a CSSFunctionRule
const sheet = document.styleSheets[0];
const cssFunc = sheet.cssRules[0];

// Accessing both CSSFunctionDeclarations
console.log(cssFunc.cssRules);

Dann protokollieren wir 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.

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

console.log(cssFunc.cssRules[2]); // Second CSSFunctionDeclarations
console.log(cssFunc.cssRules[2].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[2].style.result);

Im zweiten Fall gibt result einen leeren String zurück, da der zweite Deklarationsabschnitt keinen result-Descriptor enthält.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @function
• CSSFunctionRule
• CSSFunctionDescriptors