Wie kann ich mit JavaScript auf benutzerdefinierte CSS-Eigenschaften (Variablen) zugreifen und diese ändern?

Zugriff auf benutzerdefinierte CSS-Eigenschaften (Variablen) über JavaScript

JavaScript bietet die Möglichkeit, mit benutzerdefinierten CSS-Eigenschaften, sogenannten CSS-Variablen, zu interagieren. Obwohl sie in Stylesheets als var() definiert sind, erfordert der Zugriff über JavaScript einen etwas anderen Ansatz.

Benutzerdefinierte Eigenschaften abrufen und festlegen

Um den Wert einer benutzerdefinierten Eigenschaft zu ermitteln -Eigenschaft verwenden Sie die folgende Syntax:

var value = document.body.style.getPropertyValue('--property-name');

In ähnlicher Weise können Sie zum Festlegen einer benutzerdefinierten Eigenschaft Folgendes tun: verwenden:

document.body.style.setProperty('--property-name', 'new-value');

Beispielimplementierung

Betrachten Sie eine benutzerdefinierte Eigenschaft --mycolor, die in CSS als Hintergrundfarbe eines Elements definiert ist. Um seine Farbe mit JavaScript zu ändern, können Sie den folgenden Code ausführen:

document.body.style.setProperty('--mycolor', 'red');

Alternative Methoden

jQuery bietet auch Methoden für die Interaktion mit benutzerdefinierten Eigenschaften:

// Get property
var value = $('body').css('--property-name');

// Set property
$('body').css('--property-name', 'new-value');

Häufige Fallstricke vermeiden

Wie in der Einleitung gezeigt Beispielsweise funktioniert der Zugriff auf benutzerdefinierte Eigenschaften mit der Standard-Syntax [style.property] (z. B. document.body.style['--mycolor']) nicht. Verwenden Sie stattdessen die Methoden getPropertyValue und setProperty mit einem doppelten Bindestrich vor dem Eigenschaftsnamen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript auf benutzerdefinierte CSS-Eigenschaften (Variablen) zugreifen und diese ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!