Como você adiciona CSS com JavaScript

Existem vários cenários quando os programadores precisam estilizar a página usando JavaScript. Por exemplo, mudar dinamicamente o estilo dos elementos nas interações do usuário, incluindo mostrar diferentes animações ou estilos no foco ou pairando em qualquer texto, e assim por diante. Para um estilo dinâmico, o uso do estilo CSS em JavaScript é mais eficiente. Ele fornece uma maneira flexível e dinâmica de gerenciar estilos e tornar os aplicativos mais amigáveis.

Este artigo descreverá os métodos para adicionar CSS com JavaScript.

Como adicionar CSS com JavaScript?

No JavaScript, você pode adicionar estilos CSS a um elemento modificando sua propriedade de estilo usando os seguintes métodos ou abordagens:

• propriedade de estilo como estilo embutido
• Método setAttribute () como estilo embutido
• Método CreateElement () como um estilo global

Método 1: Adicione CSS com JavaScript usando a propriedade "estilo"

Para adicionar CSS em JavaScript, use o “estilo" propriedade. É utilizado para acessar e manipular os estilos em linha de um elemento. Ele fornece um objeto que representa os estilos embutidos de um elemento e permite obter ou definir propriedades de estilo individual.

Sintaxe
Para adicionar estilo CSS em JavaScript, a seguinte sintaxe é utilizada para o “estilo" propriedade:

elemento.estilo;

Aqui, "elemento”É uma referência a um elemento HTML.

Exemplo
No exemplo seguinte, modelaremos os botões usando JavaScript. Em primeiro lugar, criaremos três botões e atribuiremos IDs a eles, o que ajuda a acessar os elementos do botão para estilo:

Concordar
Rejeitar
Aceitar

Antes de modelar a saída, será assim:

Agora, vamos estilizar esses botões em JavaScript usando o “estilo" propriedade. Primeiro, obtenha todos os elementos do botão usando seus IDs atribuídos com a ajuda do “getElementById ()”Método:

let concordar = documento.getElementById ("BTN1");
Deixe rejeitar = documento.getElementById ("btn2");
Deixe aceitar = documento.getElementById ("btn3");

Defina as cores de fundo de todos esses botões usando o “estilo" propriedade:

concordar.estilo.AntecedentesColor = "verde";
rejeitar.estilo.AntecedentesColor = "Red";
aceitar.estilo.AntecedentesColor = "Amarelo";

Como você pode ver, os botões foram estilizados com sucesso usando o “estilo" propriedade:

Método 2: Adicione CSS com JavaScript usando o método "SetAttribute ()"

Para adicionar estilo CSS em JavaScript, use o “setAttribute ()”Método. É usado para definir ou adicionar um atributo e seu valor a um elemento HTML.

Sintaxe
A sintaxe a seguir é utilizada para o “setAttribute ()”Método:

elemento.setattribute (atributo, valor);

Exemplo
Aqui, definiremos os diferentes estilos nos botões em JavaScript usando o “setAttribute ()”Método. Defina o raio da borda de todos os botões para “.5REM”, E a cor do texto do“Concordar" e "Rejeitar”Botões para“branco”.

concordar.setattribute ("estilo", "cor de fundo: verde; cor: branco; radio de fronteira: .5remm; ");
rejeitar.setattribute ("estilo", "cor de fundo: vermelho; cor: branco; radio de fronteira: .5remm; ");
aceitar.SetAttribute ("Style", "Background-Color: Yellow; Radius de fronteira: .5remm; ");

Saída

Método 3: Adicione CSS com JavaScript usando o método "CreateElement ()"

Se você deseja criar classes ou IDs no estilo JavaScript como no estilo CSS, use o “createElement ()”Método. É utilizado para criar dinamicamente um novo elemento. Para o estilo, crie um “estilo”Elemento usando este método. O "CreateElement ('estilo')”O método no JavaScript é usado para criar dinamicamente um novo elemento de estilo, que pode ser usado para adicionar estilos CSS a uma página da web.

Sintaxe
A sintaxe dada é usada para o “createElement ()”Método:

documento.createElement (elementType);

Para adicionar estilo CSS em JavaScript, use a sintaxe dada:

const style = documento.createElement ('estilo');

Em seguida, anexe o elemento de estilo na etiqueta da cabeça usando a sintaxe abaixo:

documento.cabeça.ApndendChild (estilo);

Aqui, "estilo”É uma referência ao elemento de estilo recém -criado e“documento.cabeça”É o elemento principal do documento HTML.

Exemplo
Primeiro, crie um elemento de estilo usando o “createElement ()”Método:

Var Style = Documento.createElement ('estilo');

Agora, crie um “btn”Classe para aplicar o mesmo estilo em todos os botões e ids“BTN1","BTN2" e "BTN3”Para estilo de botão individual:

estilo.INNERHTML = '
.btn
Size da fonte: 1.1Rem;
preenchimento: 3px;
margem: 2px;
Font-Family: Sans-Serif;
Radio de fronteira: .5REM;

#BTN1
Background-Color: verde;
cor branca;

#btn2
cor de fundo: vermelho;
cor branca;

#btn3
cor de fundo: amarelo;

';

Agora, anexe o elemento de estilo ao chefe do documento, passando como um parâmetro para o “ApndendChild ()”Método:

documento.cabeça.ApndendChild (estilo);

Saída

Isso se trata de adicionar CSS em JavaScript.

Conclusão

Para adicionar CSS com JavaScript, utilize o estilo em linha, incluindo o “estilo”Propriedade e“setAttribute ()”Método, ou o estilo global usando o“createElement ()”Método. O estilo global é mais eficiente, enquanto um método em linha não é recomendado, pois dificulta a manutenção dos estilos de aplicação e pode levar à repetição de código. Este artigo descreveu os métodos para adicionar CSS com JavaScript.