So ändern Sie CSS -Variablen durch JavaScript?

CSS -Variablen sind benutzerdefinierte Eigenschaften, die vom Entwickler generiert werden und aus einem bestimmten Namen und Wert bestehen. Der Vorteil der Verwendung dieser Variablen besteht darin, dass diese, sobald diese deklariert wurden.

Manchmal jedoch in bestimmten Szenarien, z. Dies kann daher durch die Verwendung der Methode JavaScript getComputedStyle () und der Methode setProperty () erfolgen.

Im Folgenden haben wir mit Hilfe eines Beispiels demonstriert, wie CSS -Variablen mit JavaScript ändert.

So ändern Sie CSS -Variablen durch JavaScript

Um zu verstehen, wie eine CSS -Variable mit JavaScript ändert.

Html

Dies ist ein Absatz.

Holen Sie sich eine Schriftfamilie
Schriftfamilie setzen

Wir erstellen eine

Element, um mithilfe von CSS -Variablen ein gewisses Styling anzuwenden und dann zwei Schaltflächen zu erstellen, um CSS -Variablen mit JavaScript zu erhalten und festzulegen.

CSS

Zunächst erstellen wir einige globale Variablen in der: Root Selektor und stellen ihnen einige Werte bereit.

:Wurzel
--Schriftfamilie: Times New Roman;
--Schriftgröße: 30px;

Folgen Sie nun, um diese Variablen im Absatz zu verwenden.

P
Farbe braun;
Schriftfamilie: var (-Schriftfamilie);
Schriftgröße: var (-Schriftgröße);

Im obigen Code geben wir dem Absatz eine gewisse Farbe und verwenden die Funktion var (), wir greifen auf unsere CSS -Variablen zu, um dem Absatz eine Schriftfamilie und eine Schriftgröße zu verleihen.

Jetzt möchten wir die Werte der CSS -Variablen mit JavaScript aktualisieren. So machst du es. In dem folgenden Code holen wir im Grunde genommen und aktualisieren den Wert der Variablen für die Fautfamilie.

JS

var store = document.QuerySelector (': root');
Funktion getFontfamily ()
var value = getComputedStyle (Store);
alarm ("erste Schriftfamilie:"+ Wert.GetPropertyValue ('-Schriftfamilie'));

Funktion setfontfamily ()
speichern.Stil.setProperty ('-Schriftfamilie', 'Verdana');

Im obigen Code erstellen wir eine Variable mit dem Namen „Speichern“, um alle CSS.

Wir generieren dann eine Funktion „GetFontfamily“, um die Variablen abzurufen, die ursprünglich in der Variablen „Speichern“ gespeichert wurden die Schriftfamilie.

Zuletzt generieren wir erneut eine andere Funktion "setfontfamily ()", um den neuen Wert der Variablen für die FONT -Familie mithilfe der Methode SetProperty () festzulegen.

Ausgang

So sieht unsere Webseite anfangs aus.

Klicken Sie auf die Schaltfläche GET, um den Wert der ursprünglichen Schriftfamilie zu holen.

Nach dem Klicken.

Die anfängliche Schriftfamilie ist zeitweise neu römisch.

So aktualisieren Sie die Schriftfamilie.

Nachdem die Schaltfläche geklickt wurde.

Die Variable der FONT -Familie wurde erfolgreich auf "Verdana" aktualisiert.

Abschluss

Zum Zweck des Abrufens oder zur Aktualisierung der Werte bestimmter CSS -Variablen über JavaScript sind zwei Methoden verfügbar. Die erste ist die Methode GetComputedStyle (), um den Wert einer Variablen zu holen, um den Wert einer Variablen mit der Methode setProperty () zu aktualisieren. Das Ändern von CSS -Variablen durch JavaScript wird in Szenarien wie beim Entwerfen einer reaktionsschnellen Website oder beim Abholen bestimmter Daten aus der Datenbank nützlich. In diesem Tutorial wird erläutert, wie diese Variablen mit Hilfe eines geeigneten Beispiels durch JavaScript geändert werden können.