CSSFunctionRule

Instanz-Eigenschaften

Diese Schnittstelle erbt auch Eigenschaften von CSSGroupingRule.

CSSFunctionRule.name Schreibgeschützt Experimentell

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

CSSFunctionRule.returnType Schreibgeschützt Experimentell

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

Instanz-Methoden

Diese Schnittstelle erbt auch Methoden von CSSGroupingRule.

CSSFunctionRule.getParameters() Experimentell

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

Beispiele

Grundlegende Nutzung von CSSFunctionRule

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

CSS

Unser CSS definiert eine benutzerdefinierte Funktion mittels der @function Regel. Die Funktion heißt --lighter() und gibt eine aufgehellte Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter, eine <color> und eine <number>. Es gibt einen oklch()-Farbwert zurück, der mit Hilfe der relativen Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und der Helligkeitskanal wird um die Eingabezahl 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 Abruf einer Referenz auf das mit unserem Dokument verknüpfte Stylesheet, indem HTMLStyleElement.sheet verwendet wird, und dann einer Referenz auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules. Wir protokollieren dann jedes der CSSFunctionRule-Mitglieder in die Konsole.

// 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 name-Eigenschaft ist gleich --lighter.

• Die returnType-Eigenschaft ist gleich <color>.

• Die getParameters()-Methode 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