Estoy tratando de obtener una variable CSS en Javascript. He leído los otros hilos de Stack pertinentes a este objetivo, pero todavía estoy perdido. Por favor, sálvame de mí mismo.
CSS:
:root { --loaderSpeed: 100ms; --loaderDuration: calc(var(--loaderSpeed)*44); }JavaScript
setTimeout(() => { const box = document.getElementById('loaderWrapper'); box.style.display = 'none'; }, 4400);"4400" debe reemplazarse con la variable --loaderDuration
La investigación indica que estos dos están involucrados:
getComputedStyle(document.documentElement) .getPropertyValue('--my-variable-name');... pero no he podido implementar con éxito.
¿Alguna idea, equipo? Gracias de antemano.
calc() no puede calcular la multiplicación de 100ms * 44, así que he cambiado --loaderSpeed:100 eliminado ms . y también creó un nuevo valor llamado loaderSecondsMultiplier .getPropertyValue obtener valores de variables css y los convertí en un número y luego simplemente los multipliqué y, por último, los almacené en 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>Segundo enfoque
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>:) Estás lo suficientemente cerca, esta es la forma correcta:
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>