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.
calc() function cannot calculate multiplication of 100ms * 44 so, I have changed --loaderSpeed:100 removed ms. and also created new valiable called loaderSecondsMultiplier.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>:) 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>