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!