Como definir o estilo usando javascript puro

Quando os desenvolvedores precisam adicionar animação ou alterar o estilo de qualquer elemento com base em interações do usuário ou outros eventos dinâmicos na página da web, pode ser mais eficiente usar JavaScript para atualizar os estilos em vez de usar CSS. JavaScript pode criar animações que seriam difíceis ou impossíveis de alcançar apenas com CSS.

Este tutorial descreverá o processo de estilo da página usando JavaScript.

Como definir o estilo usando javascript puro?

Para estilizar uma página da web usando JavaScript, use as seguintes abordagens:

• Estilo embutido
• Estilo global

Método 1: Defina o estilo com JavaScript usando o estilo "embutido"

Para aplicar qualquer estilo em um único elemento, use as seguintes abordagens:

• atributo de estilo
• Método setAttribute ()

Exemplo 1: estilo embutido usando o atributo "estilo"

Primeiro, adicione algum conteúdo na página:

Me modere usando estilo embutido em javascript

A página da web antes do estilo agora se parece o seguinte:

Agora, estilize o texto usando JavaScript. Primeiro, obtenha a referência do texto em que queremos adicionar algum estilo usando o “getElementById ()”Método:

Deixe o texto = documento.getElementById ("texto");

Altere a cor do texto usando o “estilo”Atributo:

texto.estilo.color = "vermelho";

Como você pode ver, o texto está agora em vermelho:

Exemplo 2: estilo embutido usando o método "setAttribute ()"

Aqui, vamos usar o “setAttribute ()”Método onde mudaremos a cor e a cor de fundo do texto e definiremos o texto no estilo em negrito:

texto.setattribute ("estilo", "cor de fundo: cinza; cor: amarelo; fonte: negrito;");

Pode -se observar que a cor, a cor do fundo e o estilo de fonte foram implementados com sucesso no texto:

Método 2: Defina o estilo com JavaScript usando o estilo "global"

Se você quiser adicionar o mesmo estilo nos diferentes elementos, use o “estilo global"Técnica. Ele define estilos em vários elementos ao mesmo tempo usando o “getElementsByClassName () "," GetElementsByTagName () "ou" QuerySelectorAll ()" métodos.

Exemplo

No arquivo html, adicione algum texto na página:

Estilo usando javascript

Me modere usando estilo global em javascript

Me modere usando estilo global em javascript

Conteúdo corporal

Saída

Agora, estilize a página usando a abordagem de estilo global. Primeiro, adicione algum estilo para a tag usando o “QuerySelector ()”Método. Aqui, mudaremos a cor do fundo, a família de fontes e a cor do texto e definiremos o preenchimento e a margem do corpo para '0' usando o “estilo”Atributo:

Const Body = Document.queryselector ("corpo");
corpo.estilo.BackgroundColor = "LightBlue";
corpo.estilo.fontfamily = "Arial, sem serrif";
corpo.estilo.color = "branco";
corpo.estilo.margin = "0";
corpo.estilo.preenchimento = "0";

Como você pode ver, todo o estilo fornecido foi implementado com sucesso na página da web:

Agora, vamos mudar a cor do cabeçalho e movê -la para baixo aplicando “Margintop”:

const h4 = documento.QuerySelector ("H4");
H4.estilo.color = "preto";
H4.estilo.margintop = "50px";

Você pode ver que o cabeçalho está se movendo um pouco para baixo e a cor é alterada para “preto”:

Agora, altere a cor do texto do texto especificado que contém o “texto”Classe usando a“QuerySelectorAll ()”Método:

Deixe elementos = documento.QuerySelectorAll ('.texto');
elementos.foreach (função (elem)
Elem.estilo.color = "azul";
);

Saída

Isso era tudo sobre estilo usando javascript puro.

Conclusão

Para estilizar uma página da web usando JavaScript, use o “Estilo embutido "ou o" estilo global”Com a ajuda do“Atributo do estilo ”,“ SetAttribute ()”Método,“getElementsbyclassName ()","getElementsByTagName () "ou" QuerySelectorAll ()" métodos. O estilo embutido é usado para estilizar um único elemento, enquanto vários elementos usam a abordagem de estilo global para estilo. Este tutorial descreveu o processo de estilo da página usando JavaScript.