Obtenga el valor calculado de la variable CSS que usa una expresión como calc

Si te encuentras con algún detalle que no comprendes puedes dejarlo en los comentarios y te responderemos rápidamente.

Solución:

Técnicamente no puede porque el valor calculado no es static y dependerá de otras propiedades. En este caso, es trivial ya que estamos tratando con el valor de píxel, pero imagine el caso en el que tendrá un valor porcentual. El porcentaje es relativo a otras propiedades, por lo que no podemos calcularlo hasta que se use con var(). La misma lógica si usamos unidades como em, ch, etc.

Aquí hay un ejemplo simple para ilustrar:

let div = document.getElementById('example');
console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))
console.log(window.getComputedStyle(div).getPropertyValue('font-size'))
console.log(window.getComputedStyle(div).getPropertyValue('width'))
console.log(window.getComputedStyle(div).getPropertyValue('background-size'));

:root 
  --example-var: calc(100% + 5px - 10px);

#example 
  font-size:var(--example-var);
  width:var(--example-var);
  background-size:var(--example-var);

some text

Es importante tener en cuenta el último caso, donde background-size tiene un comportamiento especial al combinar porcentaje y valor de píxel. También puede ver claramente en el primer caso que el navegador ni siquiera calculará el 5px - 10px y lo hará solo cuando se use var().

---

En caso de que sepas que el calc() solo se usará con valores de píxeles, simplemente puede aplicarlo a cualquier propiedad y leerlo. Funcionará ya que el valor calculado siempre se evaluará de la misma manera, sea cual sea la propiedad:

let div = document.getElementById('example');
console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))
console.log(window.getComputedStyle(div).getPropertyValue('font-size'))
console.log(window.getComputedStyle(div).getPropertyValue('width'))
console.log(window.getComputedStyle(div).getPropertyValue('background-size'));
console.log(window.getComputedStyle(div).getPropertyValue('background-color'));

:root 
  --example-var: calc(100px - 10px);
  --test:var(--example-var)

#example 
  font-size:var(--example-var);
  width:var(--example-var);
  background-size:var(--example-var);
  background-color:var(--example-var);

Por supuesto, debe asegurarse de considerar una propiedad que espera un valor de píxel o tendrá un valor no válido (como con el fondo en el ejemplo anterior).

bueno, una forma extravagante de hacer esto es agregar

:root 
  --example-var: calc(100px - 5px);


#var-calculator 
    // can be fetched through .getBoundingClientRect().width
    width: var(--example-var); 

    // rest of these just to make sure this element
    // does not interfere with your page design.
    opacity: 0;
    position: fixed;
    z-index: -1000;

const width = document.getElementById('var-calculator').getBoundingClientRect().width

No sé si esto es aplicable para su caso de uso, pero lo probé y funciona.

Si estás contento con lo expuesto, tienes la habilidad dejar una sección acerca de qué te ha impresionado de este post.

---

---

Utiliza Nuestro Buscador