CSSFunctionRule

Instanz-Eigenschaften

Dieses Interface erbt auch 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.

Instanz-Methoden

Dieses Interface erbt auch Methoden von CSSGroupingRule.

CSSFunctionRule.getParameters()

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

Beispiele

Grundlegende Nutzung von CSSFunctionRule

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

CSS

Unser CSS definiert eine benutzerdefinierte Funktion mit der @function At-Rule. Die Funktion heißt --lighter() und gibt eine aufgehellte Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter, ein <color> und eine <number>. Es 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 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 beginnt mit dem Abrufen einer Referenz auf das mit unserem Dokument verbundene Stylesheet über Document.styleSheets, dann wird eine Referenz auf die einzige Regel im Stylesheet abgerufen, die CSSFunctionRule — über CSSStylesheet.cssRules. Wir protokollieren dann jeden der CSSFunctionRule-Mitglieder in die Konsole.

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

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

• Die name Eigenschaft ist gleich --lighter.
• Die returnType Eigenschaft ist gleich <color>.
• Die getParameters() Methode gibt ein Array zurück, das folgendermaßen aussieht:
  js

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @function
• CSSFunctionDescriptors
• CSSFunctionDeclarations