CSS Variables + JavaScript = Win!


by kirupa | 5 June 2018

When setting CSS property values via JavaScript, especially the really complex ones, you will often find yourself wrestling with strings:

This is a companion discussion topic for the original entry at https://www.kirupa.com/html5/css_variables_js_win.htm


One thing I’ve come to sad conclusion with is that you can’t really increment a CSS variable using just CSS. I tried incrementing a value on hover, and it didn’t work. It seems like you have to use JavaScript to permanently set a CSS variable to a new value. Using animation keyframes, for example, doesn’t change the variables in the right scope. At least that is what I seemed to find. I’d love to be proven wrong :cocktail: