Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mit JavaScript auf benutzerdefinierte CSS-Eigenschaften (Variablen) zugreifen und diese ändern?

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

Linda Hamilton
Freigeben: 2024-12-06 01:46:14
Original
390 Leute haben es durchsucht

How Can I Access and Modify CSS Custom Properties (Variables) with JavaScript?

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');
Nach dem Login kopieren

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

document.body.style.setProperty('--property-name', 'new-value');
Nach dem Login kopieren

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');
Nach dem Login kopieren

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');
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage