Uso de JavaScript para alterar variáveis do CSS

Alterar variáveis usando JavaScript

As variáveis CSS podem ser acessadas pelo DOM, o que significa que você pode alterá-las usando JavaScript.

Este exemplo ilustra como criar um script para exibir e alterar o valor da variável --blue usada no exemplo anterior. Neste momento, se você não está familiarizado com JavaScript, não se preocupe. Você pode aprender mais sobre JavaScript em nosso tutorial de JavaScript:

Exemplo

<script>
// Obtém o elemento raiz
var r = document.querySelector(':root');
// Cria uma função para obter o valor da variável
function myFunction_get() {
  // Obtém os estilos (propriedades e valores) para a raiz
  var rs = getComputedStyle(r);
  // Alerta o valor da variável --blue
  alert("O valor de --blue é: " + rs.getPropertyValue('--blue'));
}
// Crie uma função para definir o valor da variável
function myFunction_set() {
  // Defina o valor da variável --blue para outro valor (no caso "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Experimente você mesmo

Suporte do navegador

Os números na tabela indicam a versão inicial do navegador que suporta plenamente essa propriedade.

Função
var() 49.0 15.0 31.0 9.1 36.0

Função var() do CSS

Função Descrição
var() Insira o valor da variável CSS.