Como alterar as variáveis ​​CSS através do JavaScript?

As variáveis ​​CSS são propriedades personalizadas que são geradas pelo desenvolvedor e consistem em um nome e valor específicos. A vantagem de usar essas variáveis ​​é que, uma vez declaradas, elas podem ser usadas em qualquer outro lugar do documento e impede que você escreva valores redundantes de CSS de novo e de novo.

No entanto, às vezes em certos cenários, como ao projetar um site responsivo ou buscar determinados dados do banco de dados que você precisaria buscar ou atualizar valores de determinadas variáveis ​​CSS. Portanto, isso pode ser feito usando o método JavaScript GetComputedStyle () e o método setProperty ().

Abaixo, demonstramos com a ajuda de um exemplo de como alterar variáveis ​​CSS usando JavaScript.

Como alterar as variáveis ​​CSS através do JavaScript

Com o objetivo de entender como alterar uma variável CSS usando JavaScript, vamos considerar um exemplo.

Html

Este é um parágrafo.

Obtenha a família de fontes
Defina a família de fontes

Estamos criando um

Elemento para aplicar algum estilo usando variáveis ​​CSS e depois criar dois botões para obter e definir variáveis ​​CSS usando JavaScript.

CSS

Agora, antes de tudo, estamos criando algumas variáveis ​​globais no: seletor de raiz e fornecendo alguns valores.

:raiz
--Fonte-família: Times New Roman;
--tamanho da fonte: 30px;

Agora, para usar essas variáveis ​​no parágrafo, siga o trecho de código abaixo.

P
cor marrom;
Fonte-família: var (-font-família);
Size da fonte: var (-tamanho da fonte);

No código acima, estamos dando um pouco de cor ao parágrafo e usando a função var (), estamos acessando nossas variáveis ​​CSS para fornecer a família de fontes e o tamanho da fonte ao parágrafo.

Agora, queremos atualizar os valores das variáveis ​​CSS usando JavaScript. Aqui está como você faz isso. No código abaixo, estamos basicamente buscando, além de atualizar o valor da variável -font -família.

JS

var store = documento.QuerySelector (': raiz');
function getfontfamily ()
var value = getComputedStyle (armazenamento);
alerta ("Família inicial da fonte:"+ valor.getPropertyValue ('-fonte-família'));

função setfontfamily ()
loja.estilo.SetProperty ('-Font-Family', 'Verdana');

No código acima, estamos criando uma variável pelo nome "armazenamento" para armazenar todas as variáveis ​​CSS declaradas no: seletor de raiz usando o método queryselector ().

Estamos então gerando uma função "getFontFamily" para buscar as variáveis ​​que foram inicialmente salvas na variável "Store" usando o método getComputedStyle () e depois estamos usando alert () para mostrar o valor inicial da variável correspondente a a família de fontes.

Por fim, estamos novamente gerando outra função "setFontFamily ()" para definir o novo valor da variável -Font -Family usando o método setProperty ().

Saída

É assim que inicialmente nossa página da web se parece.

Clique no botão Get para buscar o valor da família de fontes originais.

Depois de clicar.

A família inicial é Times New Roman.

Para atualizar a família de fontes, clique no botão Definir.

Depois que o botão é clicado.

A variável -font -família foi atualizada para "Verdana" com sucesso.

Conclusão

Para o objetivo de buscar ou atualizar os valores de certas variáveis ​​CSS através do JavaScript, existem dois métodos disponíveis. O primeiro é o método getComputedStyle () para buscar o valor de uma variável, enquanto isso, atualizar o valor de uma variável usando o método setProperty (). A alteração das variáveis ​​de CSS por meio de JavaScript é útil em cenários como ao projetar um site responsivo ou buscar determinados dados do banco de dados. Este tutorial discute como alterar essas variáveis ​​através do JavaScript com a ajuda de um exemplo adequado.