So lesen und schreiben Sie CSS-Variablen über jQuery

07. Februar 2023

css javascript jquery css-only

CSS-Variablen lassen sich über jQuery bzw. JavasScript sehr leicht lesen und schreiben. Wie, das zeigen wir Ihnen in einem kleinen Beispiel.

Während sich einzelne CSS-Eigenschaften grundsätzlich auch einfach direkt über JavaScript setzen lassen, kann diese Technik sehr nützlich sein, um allgemeine Styles dynamisch zu definieren. In dem Fall lassen sich auch die zu setzenden Werte direkt im CSS definieren. Dadurch entkoppeln Sie außerdem die Darstellung stärker vom Skript.

Im folgenden Beispiel wird die CSS-Variable colorButtons auf den Wert colorButtonsChanged gesetzt, wenn die aktuelle Uhrzeit in Stunden über timeToChangeColor ist.

Definition der CSS-Variablen

.buttons {

  --timeToChangeColor:26;

  --colorButtons:red;
  --colorButtonsChanged:green;

  color:var(--colorButtons);
}

CSS-Variable über jQuery auslesen und schreiben

var timeToChangeColor   = jQuery('.buttons').css('--timeToChangeColor');
var colorButtonsChanged = jQuery('.buttons').css('--colorButtonsChanged');

if((new Date()).getHours() > timeToChangeColor){
  jQuery('.buttons').css('--colorButtons', colorButtonsChanged)
}

Das gleiche Skript direkt über CSS-Only umgesetzt

-w-jquery:var timeToChangeColor = jQuery('.buttons').css('--timeToChangeColor');var colorButtonsChanged = jQuery('.buttons').css('--colorButtonsChanged');if((new Date()).getHours() > timeToChangeColor){  jQuery('.buttons').css('--colorButtons', colorButtonsChanged)};