CSSFunctionDeclarations

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 CSSFunctionDeclarations-Interface des CSS Object Model repräsentiert eine zusammenhängende Folge von CSS-Deklarationen, die in einem @function-Körper enthalten sind.

Dies kann CSS-Benutzerdefinierte Eigenschaften und den Wert des results Deskriptors innerhalb des @function Körpers einschließen, aber es umfasst keine Blöcke wie @media At-Regeln, die enthalten sein können. Ein solcher Block, der in der Mitte einer Reihe von Deklarationen enthalten ist, würde dazu führen, dass die Körperinhalte in separate CSSFunctionDeclarations-Objekte aufgeteilt werden, wie in unserem Mehrere CSSFunctionDeclarations-Beispiel gezeigt wird.

Instanzeigenschaften

Dieses Interface erbt auch Eigenschaften von CSSRule.

CSSFunctionDeclarations.style Schreibgeschützt Experimentell: Gibt ein CSSFunctionDescriptors-Objekt zurück, das die Deskriptoren repräsentiert, die in einem @function-Körper verfügbar sind.

Beispiele

Grundlegende Verwendung von `CSSFunctionDeclarations`

In diesem Beispiel definieren wir eine benutzerdefinierte CSS-Funktion und greifen dann mit der 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 mit Hilfe 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> {
  --someVar: 100;
  result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);
}

Wir haben auch eine lokale benutzerdefinierte Eigenschaft innerhalb der Funktion, --someVar, eingefügt, die nicht verwendet wird, aber illustriert, was passiert, wenn mehrere Deklarationen kontinuierlich innerhalb des @function-Körpers verfügbar sind.

JavaScript

Unser Skript beginnt damit, eine Referenz auf das Stylesheet, das an unser Dokument angehängt ist, mit HTMLStyleElement.sheet zu erhalten, 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 kontinuierliche Folge von Deklarationen innerhalb der Funktion repräsentiert, indem wir cssRules[0] verwenden, greifen auf die Deskriptorinformationen mit CSSFunctionDeclarations.style zu und greifen dann auf die Länge des Deskriptors und die 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.length);
console.log(cssFunc.cssRules[0].style.result);

Besonders bemerkenswert:

Die length-Eigenschaft ist gleich 2, da es zwei Teile im Text des Deskriptors gibt (--someVar: 100; und result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);).
Die result-Eigenschaft entspricht dem result-Deskriptor 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 wird, zwei CSSFunctionDeclarations-Objekte generiert.

CSS

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

css

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

JavaScript

Unser Skript beginnt damit, eine Referenz auf das Stylesheet, das an unser Dokument angehängt ist, über HTMLStyleElement.sheet zu erhalten, dann eine Referenz auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules.

Wir greifen dann auf die CSSGroupingRule.cssRules zu und protokollieren deren 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); repräsentiert.
Ein CSSMediaRule-Objekt, das die @media-At-Regel repräsentiert.
Ein zweites CSSFunctionDeclarations-Objekt, das den Abschnitt --y: var(--x); repräsentiert.

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

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

Wir protokollieren dann 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 eine leere Zeichenfolge zurück, weil der zweite Deklarationsabschnitt keinen result-Deskriptor enthält.