CSSFunctionDescriptors

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 CSSFunctionDescriptors-Interface des CSS Object Model repräsentiert die Deskriptoren, die in einem Satz von CSS-Deklarationen enthalten sind, der durch ein CSSFunctionDeclarations-Objekt dargestellt wird.

Ein CSSFunctionDescriptors-Objekt wird über die CSSFunctionDeclarations.style-Eigenschaft abgerufen.

CSSStyleDeclaration CSSFunctionDescriptors

In diesem Artikel

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von CSSStyleDeclaration.

CSSFunctionDescriptors.result Schreibgeschützt

Gibt einen String zurück, der einen result-Deskriptor repräsentiert, falls einer im zugehörigen Deklarationssatz existiert.

Beispiele

Grundlegende Verwendung von CSSFunctionDescriptors

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

CSS

Unser CSS definiert eine benutzerdefinierte Funktion mit 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>. Sie gibt einen oklch()-Farbwert zurück, der mithilfe der relativen Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und ihr 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 damit, eine Referenz auf das mit unserem Dokument verbundene Stylesheet über HTMLStyleElement.sheet zu erhalten. Danach holen wir eine Referenz auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules.

Wir greifen dann auf das CSSFunctionDeclarations-Objekt zu, das die einzige durchgängige Folge von Deklarationen innerhalb der Funktion darstellt, indem wir cssRules[0] verwenden, greifen auf die Informationen des Deskriptoren über CSSFunctionDeclarations.style zu und greifen dann auf die Style-Informationen des Deskriptoren zu. All diese Informationen werden in die Konsole geloggt.

js
// Get a CSSFunctionRule
const cssFunc = document.getElementById("css-output").sheet.cssRules[0];

// Accessing CSSFunctionDeclarations and CSSFunctionDescriptors
console.log(cssFunc.cssRules[0]); // CSSFunctionDeclarations
console.log(cssFunc.cssRules[0].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[0].style.result);

Am bemerkenswertesten ist, dass die result-Eigenschaft dem result-Deskriptor des @function-Körpers entspricht, der oklch(from var(--color) calc(l + var(--lightness-adjust)) c h) ist.

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)
CSSFunctionDescriptors
Instanzeigenschaften
1. result
Vererbung
1. CSSStyleDeclaration
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