CSSFunctionRule

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das CSSFunctionRule Schnittstelle des CSS Objektmodells repräsentiert CSS @function (benutzerdefinierte Funktion) at-rules.

CSSRule CSSGroupingRule CSSFunctionRule

In diesem Artikel

Instanz-Eigenschaften

Diese Schnittstelle 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ückgabewert der benutzerdefinierten Funktion darstellt.

Instanz-Methoden

Diese Schnittstelle erbt auch Methoden von CSSGroupingRule.

CSSFunctionRule.getParameters()

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.

css
@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.

js
// 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>" }, ];

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS Object Model (CSSOM)
CSSFunctionRule
Instanzeigenschaften
1. name
2. returnType
Instanzmethoden
1. getParameters()
Vererbung
1. CSSGroupingRule
2. CSSRule
Verwandte Seiten für CSSOM
Anleitungen
1. CSS Declaration
2. CSS-Deklarationsblock
3. Bestimmung der Dimensionen von Elementen
4. Verwaltung der Bildschirmorientierung
5. Verwenden dynamischer Styling-Informationen
6. CSS-Wertserialisierung