Como obter e definir valores de variáveis CSS com JavaScript

As variáveis CSS são uma adição muito bem-vinda à linguagem, apesar de serem incrivelmente básicas. É claro que poderíamos usar SASS ou stylus, mas as linguagens nunca devem contar com desenvolvedores que dependem de estruturas e kits de ferramentas para realizar o que sabemos que precisamos. E, assim como qualquer outra parte de uma página da Web, o senhor pode obter e manipular valores de variáveis CSS – vamos ver como!

Configuração e uso de variáveis CSS

O método tradicional de usar variáveis CSS nativas é adicioná-las ao root:

:root {
    --my-variable-name: #999999;
}

Simples. Lembre-se também de que as variáveis CSS não são nem de longe tão poderosas quanto as variáveis do SASS, stylus etc.

Obtendo o valor de uma variável CSS

Para recuperar o valor de uma variável CSS dentro da janela, o senhor usa getComputedStyle e getPropertyValue:

getComputedStyle(document.documentElement)
    .getPropertyValue('--my-variable-name'); // #999999

O valor da variável computada é retornado como uma string.

Definição do valor de uma variável CSS

Para definir o valor de uma variável CSS usando JavaScript, o senhor usa setProperty no documentElement‘s style propriedade:

document.documentElement.style
    .setProperty('--my-variable-name', 'pink');

O senhor verá imediatamente o novo valor aplicado em todos os lugares em que a variável for usada.

Eu havia previsto a necessidade de hacks nojentos para realizar a manipulação de variáveis CSS com JavaScript, então estou feliz por ser tão fácil como descrito acima!