Kann man per JavaScript auf CSS-Variablen zugreifen?

11.02.2017

Für den direkten Zugriff, wie er über das PHP-Framework möglich ist, steht in JavaScript keine Funktion zur Verfügung. Es gibt allerdings dennoch einen Weg, um CSS Daten an JavaScript zu übergeben. Dabei wird ein Data-Attribut über -w-add-data gesetzt, welches sich dann im JavaScript abfragen lässt

CSS-Daten über -w-add-data in ein Data-Attribut schreiben

html {
  -w-add-data:widthnavigationmainmenumax=$viewportMinHeaderFull;
}

Mehrere CSS-Daten über -w-add-data in Data-Attribute schreiben

html {
  -w-add-data:widthnavigationmainmenumax=$viewportMinHeaderFull,megadropdownopentype=$megaDropdownOpenType;
}

Data-Attribut in JavaScript auslesen

var maxSizeNavigationmenu jQuery('html').data('widthnavigationmainmenumax');