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 darstellt.

CSSFunctionRule.returnType Schreibgeschützt Experimentell

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

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 darstellt.

Beispiele

Grundlegende Verwendung von CSSFunctionRule

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

CSS

Unser CSS definiert eine benutzerdefinierte Funktion mithilfe der @function-At-Regel. Die Funktion wird --lighter() genannt und gibt eine aufgehellte Version einer Eingabefarbe zurück. --lighter() akzeptiert zwei Parameter, eine <color> und eine <number>. Sie gibt eine oklch()-Farbe zurück, die mit der relativen Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und ihr 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 der Referenzierung des Stylesheets, das an unser Dokument angehängt ist, über HTMLStyleElement.sheet und dann der Referenzierung der einzigen Regel im Stylesheet, der CSSFunctionRule — über CSSStylesheet.cssRules. Wir loggen dann jedes der CSSFunctionRule-Mitglieder 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