Como alterar CSS com JavaScript

A linguagem HTML é simplesmente uma linguagem de marcação que não pode executar nenhuma função e não pode executar códigos com base em vários eventos dinâmicos. Para esse fim, precisamos usar o JavaScript para alterar o estilo CSS de qualquer elemento HTML, pois o HTML não pode fazer isso por conta própria.

Pode haver várias razões pelas quais precisamos alterar o CSS e manipular com elementos HTML, pode ser carregar a folha de estilo dinamicamente, alterar a cor de um botão quando um usuário clicar nele ou escrever css em javascript. Todas essas mudanças podem ser feitas através de JavaScript. Neste artigo, veremos várias maneiras de acessar o CSS com JavaScript e alterá -lo.

Usando JavaScript para alterar CSS

Existem vários métodos em JavaScript que ajudam no acesso a elementos HTML e, através, podemos manipular os valores do CSS. Alguns desses métodos são explicados abaixo, juntamente com exemplos.

Usando getElementsbyclassName ()

O método getElementByclassName () pega uma string como nome de classe e pesquisa todo o documento HTML e retorna os elementos com o mesmo nome de classe. Depois que o nome da classe é identificado, podemos alterar as propriedades CSS, como mostrado abaixo, no exemplo:

Html:

Caixa de entrada:


Mudar de borda

JavaScript:

Aqui pesquisamos o elemento HTML por ClassName e alteramos as propriedades CSS desses elementos usando estilo.cor de fundo e estilo.Cor da borda.

Saída:

Usando getElementById ()

Outro método a ser usado é getElementById () que pesquisam todos os elementos HTML com IDs semelhantes e executa a função atribuída. Principalmente vários divs são usados ​​que são atribuídos com IDs e esses IDs são pesquisados ​​usando este método. Este é o método mais usado pelos desenvolvedores, abaixo está um exemplo:

Html:

Caixa de entrada:


Mudar de borda

JavaScript:

Aqui usamos o método para pesquisar todos os elementos usando seu ID e alteramos as propriedades do CSS usando o estilo.

Saída:

Usando o queryselector ()

Outro método que funciona como os dois métodos acima é o QuerySelector () Método que pode pesquisar por nome de classe, nome de identidade e até por tags html, mas apenas retorna o primeiro elemento HTML mencionado para pesquisar. Abaixo estão as maneiras de usar o QuerySelector:

documento.QuerySelector ("# ID of Div");
documento.QuerySelector (". Nome da classe CSS ");
documento.QuerySelector ("tag html como: div>");

Abaixo está um exemplo de QuerySelector () e como ele pode ser usado com o nome da classe, IDs etc:

Html:

Caixa de entrada:


Mudar de borda

JavaScript:

Aqui usamos o método QuerySelector () para procurar classes e ID das divs e mudamos suas propriedades CSS.

Saída:

Conclusão

Existem várias razões para mudar o CSS, e a melhor maneira de fazer isso é usar o JavaScript, pois pode acessar facilmente os elementos do HTML e alterar suas propriedades CSS. Neste artigo, discutimos como alterar o CSS usando JavaScript, vários métodos fornecidos no JavaScript para alterar os valores dos elementos html. Isso facilita o trabalho dos desenvolvedores e tornam a página da web mais dinâmica. Através desses métodos, podemos alterar as cores dos botões em clique, cores de fundo, cores de fonte etc.