https://pedromartins.com.pt/2021/02/20/manipular-variaveis-css-com-javascript/

As variáveis CSS não são uma novidade recente, no entanto, dadas as suas limitações e com a utilização de pré-processadores CSS, não sei até que ponto é que são normalmente utilizadas em desenvolvimento – falo por mim que apenas uso para efeitos muito particulares, como o que vou abordar neste post.

Uma das grandes vantagens de usar variáveis CSS é a possibilidade de podermos manipulá-las através de Javascript e os efeitos repercutirem-se em todos os elementos que as utilizem Um dos exemplos de utilização pode ser por exemplo quando queremos ter contro para alternar entre um tema claro e escuro.

Como usar variáveis CSS?

As variáveis CSS podem ser adicionadas em qualquer lado, no entanto para fazermos bom uso do efeito cascata em CSS é relativamente comum colocarmos as variáveis CSS na raíz do documento – :root, para que todos os outro elementos as possam herdar.

:root {
  --bg-color: #f0f0f0;
  --font-color: #303030;
}

body {
  background-color: var(--bg-color);
  color: var(--font-color);
}

Como obter o valor de uma variavel CSS?

Com base no exemplo anterior, obtemos a variável –bg-color da seguinte forma:

let color = getComputedStyle(document.documentElement).getPropertyValue('--bg-color'); // #f0f0f0
  • getComputedStyle(document.documentElement): Retorna um objecto com as propriedades CSS do elemento raíz (document.documentElement)
  • getPropertyValue(‘–bg-color’): retorna o valor da propriedade especificada, neste caso: –bg-color.

Como alterar o valor da variavel CSS?

Usamos o método setProperty() no estilo do elemento raíz (document.documentElement).

let newColor = rebeccapurple;

document.documentElement.style.setProperty('--bg-color', rebeccapurple);

Em baixo fica um exemplo de como aplicar esta técnica para alterar a côr de fundo. O valor definido na caixa de texto vai ser aplicado na variável CSS.

Share: