How to Get and Set CSS Variable Values with JavaScript

CSS variables are a very welcome addition to the language, despite them being incredibly basic.  Sure we could use SASS or stylus but languages should never count on developers relying on frameworks and toolkits to accomplish what we know we need.  And just like every other part of a webpage, you can get and manipulate CSS variable values — let’s check out how!


Setting and Using a CSS Variables


The traditional method of using native CSS variables is adding it to root:



:root {
    --my-variable-name: #999999;
}


Simple.  Also remember that CSS variables are nowhere near as powerful as variables within SASS, stylus, etc.


Getting a CSS Variable’s Value


To retrieve the value of a CSS variable within the window, you use getComputedStyle and getPropertyValue:



getComputedStyle(document.documentElement)
    .getPropertyValue('--my-variable-name'); // #999999


The computed variable value comes back as a string.


Setting a CSS Variable’s Value


To set the value of a CSS variable using JavaScript, you use setProperty on documentElement‘s style property:



document.documentElement.style
    .setProperty('--my-variable-name', 'pink');


You’ll immediately see the new value applied everywhere the variable is used.


I had anticipated the need for disgusting hacks to accomplish CSS variable manipulation with JavaScript so I’m happy it’s as easy as described above!


  • Elegant Overflow with CSS Ellipsis

    Overflow with text is always a big issue, especially in a programmatic environment. There’s always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were…

  • Form Element AJAX Spinner Attachment Using MooTools

    Many times you’ll see a form dynamically change available values based on the value of a form field. For example, a “State” field will change based on which Country a user selects. What annoys me about these forms is that they’ll often do an…

Leave Your Comment