Skip to content

Instantly share code, notes, and snippets.

@luciopaiva
Last active May 3, 2021 07:08
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save luciopaiva/01bda0d4311ccaecea0478ad2fd03108 to your computer and use it in GitHub Desktop.
Save luciopaiva/01bda0d4311ccaecea0478ad2fd03108 to your computer and use it in GitHub Desktop.
Read/write CSS variable in Javascript
:root {
--app-width: 1000px;
--some-calculation: calc(var(--app-width) + 1);
}
/*
The CSS property is always read as text, exactly as it is in the CSS file. This means you'll have to handle any needed
conversions and calculations yourself.
Considering you always declare the variables you want to access inside `:root`, this function does the job:
*/
function readCssVar(varName) {
varName = varName.startsWith("--") ? varName : "--" + varName;
return window.getComputedStyle(document.documentElement).getPropertyValue(varName);
}
/*
In case you need numbers:
*/
function readCssVarAsNumber(varName) {
return parseInt(readCssVar(varName), 10);
}
/*
The above won't work with calculated CSS properties, though. Say you have something like:
--width: calc(var(--height) * 3/4);
The function `readCssVar()` will return `calc(var(--height) * 3/4)`. To have the actual calculated value, use the function below:
*/
function readCalculatedCssVarAsNumber(varName) {
let div = document.getElementById("readCalculatedCssVarAsNumber");
if (!div) {
div = document.createElement("div");
div.setAttribute("id", "readCalculatedCssVarAsNumber");
div.setAttribute("position", "absolute"); // detach it from the flow so it doesn't break anything
document.body.appendChild(div); // won't work unless you actually append it to the DOM
}
div.style.strokeWidth = readCssVar(varName); // apply it to some innocent property
return parseInt(getComputedStyle(div).getPropertyValue("stroke-width"), 10); // read it back!
}
/*
Finally, this is how you *set* a property.
*/
function writeCssVar(varName, value) {
varName = varName.startsWith("--") ? varName : "--" + varName;
document.documentElement.style.setProperty(varName, value);
}
@yairEO
Copy link

yairEO commented Dec 19, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment