Kommunikation von Variablen zwischen Stylesheet und Javascript

[Rolf B]

Hallo Rudi,

CSS Variablen gibt es nicht. Es handelt sich korrekt um custom properties.

Solche kann man per inline-style zuweisen, aber auch per CSS Regeln. Man muss dann nur zuerst den computed style bestimmen, um sie in JS verwenden zu können:

<div id="gangnam">
Lora Ibsum
</div>

#gangnam {
   --baz-fump: 47;
}

const gangnam = document.getElementById("gangnam");
const gangnamStyle = window.getComputedStyle(gangnam);
const bazFump = gangnamStyle.getPropertyValue("--baz-fump");

Diese Abfrage funktioniert nicht nur mit custom properties, sondern auch mit allen anderen.

Wenn man andersrum mit custom properties beeinflussen will, wie sich eine CSS Regel auf ein bestimmtes Element auswirkt, dann ist es sinnvoll, in der CSS Regel var(--foo) zu verwenden und --foo als inline-style zu setzen.

Es gibt auch ein CSS API, mit dem man CSS Regeln suchen und finden kann, und diese manipulieren, das müsste ich jetzt aber auch erstmal nachlesen.

Rolf