Este artigo irá descrever os métodos para adicionar CSS com JavaScript.
Como adicionar CSS com JavaScript?
Em 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: Adicionar CSS com JavaScript usando a propriedade “estilo”
Para adicionar CSS em JavaScript, use o “ estilo ' propriedade. É utilizado para acessar e manipular os estilos embutidos de um elemento. Ele fornece um objeto que representa os estilos embutidos de um elemento e permite obter ou definir propriedades de estilo individuais.
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 a seguir, estilizaremos os botões usando JavaScript. Primeiramente, criaremos três botões e atribuiremos ids a eles, o que ajuda a acessar os elementos do botão para estilização:
< ID do botão = 'btn2' > Rejeitar botão >
< ID do botão = 'btn3' > Aceitar botão >
Antes de estilizar, a saída ficará 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:
vamos concordar = documento. getElementById ( 'btn1' ) ;vamos rejeitar = documento. getElementById ( 'btn2' ) ;
vamos aceitar = documento. getElementById ( 'btn3' ) ;
Defina as cores de fundo de todos esses botões usando o botão “ estilo ' propriedade:
concordar. estilo . cor de fundo = 'verde' ;rejeitar. estilo . cor de fundo = 'vermelho' ;
aceitar. estilo . cor de fundo = 'amarelo' ;
Como você pode ver, os botões foram estilizados com sucesso usando o “ estilo ' propriedade:
Método 2: Adicionar 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 seguinte sintaxe é utilizada para o “ setAttribute() ” método:
Exemplo
Aqui, vamos definir os diferentes estilos nos botões em JavaScript usando o “ setAttribute() ” método. Defina o raio da borda de todos os botões como “ .5rem ”, e a cor do texto do “ Concordar ' e ' Rejeitar botões ” para “ branco ”.
rejeitar. setAttribute ( 'estilo' , 'cor de fundo: vermelho; cor: branco; raio da borda: .5rem;' ) ;
aceitar. setAttribute ( 'estilo' , 'cor de fundo: amarelo; raio da borda: .5rem;' ) ;
Saída
Método 3: Adicionar CSS com JavaScript usando o método “createElement ()”
Se você deseja criar classes ou ids no estilo JavaScript como no estilo CSS, use o “ criarElemento() ” método. É utilizado para criar dinamicamente um novo elemento. Para estilizar, crie um “ estilo ” elemento usando este método. O ' createElement('estilo') ” em 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 “ criarElemento() ” método:
Para adicionar estilo CSS em JavaScript, use a sintaxe fornecida:
const estilo = documento. criarElemento ( 'estilo' ) ;Em seguida, anexe o elemento style na tag head usando a sintaxe abaixo:
documento. cabeça . anexarFilho ( estilo ) ;Aqui, ' estilo ” é uma referência ao elemento de estilo recém-criado e “ documento.head ” é o elemento principal do documento HTML.
Exemplo
Primeiro, crie um elemento de estilo usando o “ criarElemento() ” método:
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. HTML interno = `. btn {
Fonte - tamanho : 1.1rem ;
preenchimento : 3px ;
margem : 2px ;
Fonte - família : sem - serifa ;
fronteira - raio : .5rem ;
}
#btn1 {
fundo - cor : verde ;
cor : branco ;
}
#btn2 {
fundo - cor : vermelho ;
cor : branco ;
}
#btn3 {
fundo - cor : amarelo ;
}
` ;
Agora, anexe o elemento style ao cabeçalho do documento passando como parâmetro para o “ appendChild() ” método:
documento. cabeça . anexarFilho ( estilo ) ; Saída
Isso é tudo sobre como adicionar CSS em JavaScript.
Conclusão
Para adicionar CSS com JavaScript, utilize o estilo embutido, incluindo o “ estilo ” Propriedade, e “ setAttribute() ” ou o estilo global usando o método “ criarElemento() ” método. O estilo global é mais eficiente, enquanto um método inline não é recomendado, pois dificulta a manutenção dos estilos do aplicativo e pode levar à repetição do código. Este artigo descreveu os métodos para adicionar CSS com JavaScript.