Uso de JavaScript para cambiar variables CSS

Cambiar variables usando JavaScript

Las variables CSS pueden acceder al DOM, lo que significa que puedes cambiarlas usando JavaScript.

Este ejemplo explica cómo crear un script para mostrar y cambiar el variable --blue utilizado en el ejemplo anterior. En este momento, si no estás familiarizado con JavaScript, no te preocupes. Puedes aprender más sobre JavaScript en nuestro tutorial de JavaScript:

Ejemplo

<script>
// Obtener el elemento raíz
var r = document.querySelector(':root');
// Crear una función para obtener el valor de las variables
function myFunction_get() {
  // Obtener los estilos (propiedades y valores) del elemento raíz
  var rs = getComputedStyle(r);
  // Alertar el valor de la variable --blue
  alert("El valor de --blue es: " + rs.getPropertyValue('--blue'));
}
// Crear una función para establecer el valor de la variable
function myFunction_set() {
  // Establecer el valor de la variable --blue a otro valor (en este caso "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Prueba personalmente

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Función
var() 49.0 15.0 31.0 9.1 36.0

Función var() CSS

Función Descripción
var() Insertar el valor de la variable CSS.