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 repräsentiert.

CSSFunctionRule.returnType Schreibgeschützt Experimentell

Gibt einen String zurück, der den Rückgabetyp der benutzerdefinierten Funktion repräsentiert.

Instanz-Methoden

Diese Schnittstelle erbt auch Methoden von CSSGroupingRule.

CSSFunctionRule.getParameters() Experimentell

Gibt ein Array von Objekten zurück, die die Parameter der benutzerdefinierten Funktion repräsentieren.

Beispiele

Grundlegende Verwendung von CSSFunctionRule

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

CSS

Unser CSS definiert eine benutzerdefinierte Funktion mithilfe der @function At-Regel. Die Funktion heißt --lighter() und gibt eine hellere Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter, eine <color> und eine <number>. Sie gibt eine oklch()-Farbe zurück, die mithilfe der relativen Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und ihr Helligkeitskanal wird um die Eingabeziffer 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 damit, eine Referenz auf das mit unserem Dokument verknüpfte Stylesheet mit HTMLStyleElement.sheet zu erhalten und dann eine Referenz auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules. Anschließend protokollieren wir 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 Methode getParameters() 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