CSSFunctionRule

Instanz-Eigenschaften

Dieses Interface 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ückgabewerttyp der benutzerdefinierten Funktion repräsentiert.

Instanz-Methoden

Dieses Interface erbt auch Methoden von CSSGroupingRule.

CSSFunctionRule.getParameters() Experimentell

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

Beispiele

Grundlegende Verwendung von CSSFunctionRule

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

CSS

Unser CSS definiert eine benutzerdefinierte Funktion mittels der @function-At-Regel. Die Funktion heißt --lighter() und gibt eine aufgehellte Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter, eine <color> und eine <number>. Sie gibt eine oklch()-Farbe zurück, die mit relativer Farbsyntax erzeugt 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 damit, eine Referenz auf das mit unserem Dokument verbundene Stylesheet mithilfe von HTMLStyleElement.sheet zu erhalten, dann eine Referenz auf die einzige Regel im Stylesheet, das CSSFunctionRule — über CSSStylesheet.cssRules. Wir protokollieren dann jedes der Mitglieder von CSSFunctionRule in der 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 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