2

I am trying to get a CSS variable into Javascript. I have read the other Stack threads pertinent to this goal, but I am still lost. Please save me from myself.

CSS:

:root {
     --loaderSpeed: 100ms; 
     --loaderDuration: calc(var(--loaderSpeed)*44);
    }

JavaScript

setTimeout(() => {
    const box = document.getElementById('loaderWrapper');
    box.style.display = 'none';
 }, 4400);

"4400" needs to be replaced with the variable --loaderDuration

Research indicates that these two are involved:

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

...but I have not been able to successfully implement.

Any ideas, Team? Thank you in advance.

Improve this question

2 Answers 2

Reset to default
1
  • Problem was, you are access root values which returns string.
  • and calc() function cannot calculate multiplication of 100ms * 44 so, I have changed --loaderSpeed:100 removed ms. and also created new valiable called loaderSecondsMultiplier.
  • After that, I have getPropertyValue get css variables values and converted them into a number and then just mutiply them and in last store it in finalTimeout.

//GETTING DOCUMENT STYLES
let docStyle = getComputedStyle(document.documentElement);
// GEETING CSS VARIABLE VALUES
let loaderSpeed = parseInt(docStyle.getPropertyValue('--loaderSpeed'));
let loaderSecondsMultiplier = parseInt(docStyle.getPropertyValue('--loaderSecondsMultiplier'));
// MUTIPLYING AND STORING IT'S VALUE TO finalTimeout
let finalTimeout = loaderSpeed * loaderSecondsMultiplier;
setTimeout(() => {
  const box = document.getElementById('loaderWrapper');
  box.style.display = 'none';
}, finalTimeout);
:root {
  --loaderSpeed: 100;
  --loaderSecondsMultiplier: 44;
}
<div id="loaderWrapper">
  <h1>hey</h1>
</div>

Second approach

let docStyle = getComputedStyle(document.documentElement);

//get variable
let loaderDuration = docStyle.getPropertyValue('--loaderDuration');
loaderDuration = loaderDuration.split("ms*");
loaderSpeed = parseInt(loaderDuration[0].split("( ")[1]);
console.log(loaderSpeed);
loaderwheelSpeed = parseInt(loaderDuration[1]);

let value = document.getElementById("value");
value.innerHTML = `loader Speed: ${loaderSpeed} and loader wheelSpeed: ${loaderwheelSpeed}`

setTimeout(() => {
  const box = document.getElementById('loaderWrapper');
  box.style.display = 'none';
}, loaderSpeed * loaderwheelSpeed);
:root {
  --loaderSpeed: 1000ms;
  --loaderDuration: calc(var(--loaderSpeed)*5);
}
<div id="loaderWrapper">we are using string split method to extract correct value</div>
<p id="value"></p>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I edited to correct the typo, but I also removed the uppercase SHOUTING because, well, eww. That is my personal preference, which I probably shouldn't inflict on you, by all means do feel free to edit the uppercase back in.
Ahh, you beat me to it! though you have explained your answer much better so I think yours deserves to be accepted for future readers.
Not to mention, you made loaderSecondsMultiplier which makes the code more dynamic.
@Nikkkshit You smashed it! Thank you very much.
....and thank you David and Stranger. Very much appreciated. Go team!
|
0

:) You are close enough, here's the correct way:

let root = document.querySelector(':root');
let cs = getComputedStyle(root);
let loaderSpeed = cs.getPropertyValue('--loaderSpeed');
let loaderSpeedToInt = loaderSpeed.match(/\d+/);
let loaderDuration = loaderSpeedToInt[0] * 44;
setTimeout(() => {
  const box = document.getElementById('loaderWrapper');
  box.style.display = 'none';
}, loaderDuration);

console.log(loaderDuration);
:root {
  --loaderSpeed: 100ms;
  --loaderDuration: calc(var(--loaderSpeed)*44);
}
<div id="loaderWrapper"></div>

Improve this answer

8 Comments

"4400 needs to be replaced with the variable --loaderDuration" - OP is trying to retrieve the result of the calc() expression, to find the computed value of --loaderDuration; the approach you've posted here will - unfortunately - retrieve the string from the property calc(var(--loaderSpeed)*44) and not - again, unfortunately - the computed/calculated value.
@DavidThomas My bad, had a problem with reading, let me fix the var.
no worries at all.
@DavidThomas Thanks. Just fixed, alright now?
Having edited your answer to create a runnable snippet, I have to say "no," as I noted in my comment this will only ever return the literal string of the property: calc(var(--loaderSpeed)*44).
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.