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 aufeinanderfolgende Reihe von CSS-Deklarationen, die innerhalb eines @function-Körpers enthalten sind.

Dies kann CSS-Benutzerdefinierte Eigenschaften umfassen und den Wert des results-Deskriptors innerhalb des @function-Körpers, jedoch keine Blöcke wie @media-At-Regeln, die möglicherweise enthalten sind. 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 im Körper einer @function repräsentiert.

Beispiele

Grundlegende Verwendung von `CSSFunctionDeclarations`

In diesem Beispiel definieren wir eine benutzerdefinierte CSS-Funktion und greifen dann über das CSSOM auf ihre Deklarationen zu.

CSS

Unser CSS definiert eine benutzerdefinierte Funktion unter Verwendung der @function-At-Regel. Die Funktion heißt --lighter() und gibt eine aufgehellte Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter, einen <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 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 aufgenommen, --someVar, die nicht verwendet wird, aber veranschaulicht, was passiert, wenn mehrere Deklarationen kontinuierlich innerhalb des @function-Körpers verfügbar sind.

JavaScript

Unser Skript beginnt, indem es einen Verweis auf das Stylesheet holt, das unserem Dokument angehängt ist, unter Verwendung von HTMLStyleElement.sheet, und dann einen Verweis auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules.

Wir greifen dann auf das CSSFunctionDeclarations-Objekt zu, das die einzige durchgehende Reihe von Deklarationen innerhalb der Funktion darstellt, verwenden cssRules[0], greifen auf die Deskriptorinformationen über CSSFunctionDeclarations.style zu und greifen dann auf die Deskriptorlänge und Stilinformationen zu. All 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);

Am bemerkenswertesten:

Die length-Eigenschaft ist gleich 2, da der Text des Deskriptors zwei Teile hat (--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 ein @media-At-Regel, die in der Mitte einer Reihe von Deklarationen eingefügt ist, zwei CSSFunctionDeclarations-Objekte erzeugt.

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.

css

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

JavaScript

Unser Skript beginnt, indem es einen Verweis auf das Stylesheet holt, das unserem Dokument angehängt ist, über HTMLStyleElement.sheet, dann einen Verweis 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 Teil --x: 42;result: var(--y); repräsentiert.
Ein CSSMediaRule-Objekt, das die @media-At-Regel darstellt.
Ein zweites CSSFunctionDeclarations-Objekt, das den Teil --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 Zeichenkette zurück, da der zweite Deklarationsteil keinen result-Deskriptor enthält.