CSS-Variable mit JavaScript ändern

Verwenden Sie JavaScript, um Variablen zu ändern

CSS-Variablen können auf den DOM zugreifen, was bedeutet, dass Sie sie mit JavaScript ändern können.

Dieser Beispiel zeigt, wie Sie Skripte erstellen können, um den --blue-Variable, die im Beispiel auf der vorherigen Seite verwendet wurde, anzuzeigen und zu ändern. Wenn Sie sich mit JavaScript nicht auskennen, brauchen Sie sich keine Sorgen zu machen. Sie können mehr über JavaScript in unserem JavaScript-Tutorial lernen:

Beispiel

<script>
// Erhalten Sie das Wurzelelement
var r = document.querySelector(':root');
// Erstellen Sie eine Funktion, um den Wert der Variablen zu erhalten
function myFunction_get() {
  // Holen Sie die Stile (Eigenschaften und Werte) für den Ursprung
  var rs = getComputedStyle(r);
  // Warnen Sie vor dem Wert der Variablen --blue
  alert("Der Wert von --blue ist: " + rs.getPropertyValue('--blue'));
}
// Erstellen Sie eine Funktion, um den Wert der Variable zu setzen
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Probieren Sie es selbst aus

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die die Eigenschaft vollständig unterstützt.

Funktion
var() 49.0 15.0 31.0 9.1 36.0

CSS var() -Funktion

Funktion Beschreibung
var() Fügen Sie den Wert der CSS-Variable ein.