CSS-Variablen mit JavaScript ändern

Inhaltsverzeichnis

Ändern Sie Variablen mit JavaScript

CSS-Variablen haben Zugriff auf das DOM, was bedeutet, dass Sie sie mit JavaScript ändern können.

Hier ist ein Beispiel, wie Sie aus dem auf den vorherigen Seiten verwendeten Beispiel ein Skript erstellen können, um die Variable --blue anzuzeigen und zu ändern. Machen Sie sich vorerst keine Sorgen, wenn Sie mit JavaScript nicht vertraut sind. Du kannst lernen Weitere Informationen zu JavaScript finden Sie in unserem JavaScript-Tutorial:

Beispiel

 <script>
// Get the root element
var r = document.querySelector(':root');
  
// Create a function for getting a variable value
function 
  myFunction_get() {
  // Get the styles (properties and values) for the 
  root
  var rs = getComputedStyle(r);
  // Alert the value of 
  the --blue variable
  alert("The value of --blue is: " + 
  rs.getPropertyValue('--blue'));
}
// Create a function for setting a 
  variable value
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 →

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

.container button  {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>

<script>
// Get the root element
var r = document.querySelector(':root');

// Create a function for getting a variable value
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --blue variable
  alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}

// Create a function for setting a variable value
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>
</head>
<body>

<h1>Get and Change CSS Variable With JavaScript</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>
<br>

<button type="button" onclick="myFunction_get()">Get CSS Variable with JavaScript</button>
<button type="button" onclick="myFunction_set()">Change CSS Variable with JavaScript</button>

</body>
</html>

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das vollständig unterstützt var()-Funktion.

Function
var()	49.0	15.0	31.0	9.1	36.0

CSS var()-Funktion

var(): Fügt den Wert einer CSS-Variablen ein