CSSFunctionRule

Instanzeigenschaften

Dieses Interface erbt außerdem Eigenschaften von CSSGroupingRule.

CSSFunctionRule.name Schreibgeschützt

Gibt einen String zurück, der den Namen der benutzerdefinierten Funktion darstellt.

CSSFunctionRule.returnType Schreibgeschützt

Gibt einen String zurück, der den Rückgabetyp der benutzerdefinierten Funktion darstellt.

Instanzmethoden

Dieses Interface erbt außerdem Methoden von CSSGroupingRule.

CSSFunctionRule.getParameters()

Gibt ein Array von Objekten zurück, die die Parameter der benutzerdefinierten Funktion darstellen.

Beispiele

Grundlegende Verwendung von CSSFunctionRule

In diesem Beispiel definieren wir eine benutzerdefinierte CSS-Funktion und greifen anschließend über das CSSOM darauf zu.

CSS

Unser CSS definiert mit der @function-At-Regel eine benutzerdefinierte Funktion. Die Funktion heißt --lighter() und gibt eine aufgehellte Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter: einen <color>-Wert und einen <number>-Wert. Sie gibt eine oklch()-Farbe zurück, die mithilfe der Syntax für relative Farben erzeugt wird: Die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und ihr Helligkeitskanal um die eingegebene Zahl erhöht.

@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 ruft zunächst über HTMLStyleElement.sheet eine Referenz auf das Stylesheet ab, das mit unserem Dokument verknüpft ist. Anschließend ruft es über CSSStylesheet.cssRules eine Referenz auf die einzige Regel im Stylesheet ab, die CSSFunctionRule. Danach gibt es jedes Mitglied der CSSFunctionRule in der Konsole aus.

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

// Accessing CSSFunctionRule members
console.log(cssFunc.name);
console.log(cssFunc.returnType);
console.log(cssFunc.getParameters());

• Die Eigenschaft name ist gleich --lighter.

• Die Eigenschaft returnType ist gleich <color>.

• Die Methode getParameters() gibt ein Array zurück, das wie folgt aussieht:

  js

  [
    { name: "--color", type: "<color>" },
    { defaultValue: "0.2", name: "--lightness-adjust", type: "<number>" },
  ];
  

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @function
• CSSFunctionDescriptors
• CSSFunctionDeclarations