Este manual explicará o procedimento de adição de uma classe ativa em JavaScript.
Como adicionar classe ativa em JavaScript?
Para adicionar uma classe ativa, usaremos os seguintes métodos:
Vamos para o primeiro método!
Método 1: Use document.getElementById() com o método classList.add() para adicionar classe ativa em JavaScript
Em JavaScript, o “ document.getElementById() ” é usado para acessar um determinado elemento pelo seu id. No entanto, ele apenas seleciona os elementos com base em seus ids, não em classes. Você pode usá-lo com o “ classList.add() ” para adicionar uma classe ativa em JavaScript.
Vamos explorar esse método tomando um exemplo.
Exemplo
Em nosso arquivo HTML, pegaremos o “ ” com algum texto, especifique seu id como “ TXT ” e adicione um “ ao clicar ” evento que irá acionar o “ ativar() ” função. Observe que, adicione a tag
dentro da tag
: < p id = 'TXT' ao clicar = 'ativar()' > Toque aqui p >No arquivo JavaScript, defina a função activate() de forma que primeiro acesse o elemento de parágrafo usando seu id no método document.getElementbyId(). Em seguida, adicione uma classe CSS à sua lista de classes para fins de estilo:
função ativar ( ) {
existe um = documento. getElementById ( 'TXT' ) ;
uma. lista de classes . adicionar ( 'nova classe' ) ;
}
No arquivo CSS, coloque um ponto antes de “ nova classe ” e atribua o “ cor de fundo ” propriedade um valor “ laranja ”:
. nova classe {fundo - cor : laranja ;
}
Como resultado, quando você clicar no elemento de parágrafo, a propriedade de fundo adicionada será aplicada a ele:
Vamos dar uma olhada no seguinte método no qual usaremos o document.querySelector() para adicionar uma classe ativa.
Método 2: Use document.querySelector() com o método classList.add() para adicionar classe ativa em JavaScript
Em JavaScript, o “ document.querySelector() ” é utilizado para obter o primeiro elemento do código. Você pode especificar classes e ids dentro do método querySelector(). Pode ser usado com o “ classList.add() ” para adicionar uma classe ativa em JavaScript.
Exemplo
Agora usaremos apenas o “ document.querySelector() ” com identificação “ #TXT ” para selecionar o elemento de parágrafo. Novamente, o método classList.add() será usado para adicionar o ativo “ nova classe ”:
função ativar ( ) {existe um = documento. seletor de consulta ( '#TXT' ) ;
uma. lista de classes . adicionar ( 'nova classe' ) ;
}
Resultado
Aprendemos dois métodos mais simples para adicionar classe ativa em JavaScript
Conclusão
Para adicionar classe ativa, podemos utilizar o “ getElementById() ' ou ' querySelector() ” com o método classList.add(). Ambos os métodos mencionados obtêm os elementos por seu id primeiro, depois usando o método classList.add(), o novo nome de classe atribuído ao elemento que pode ser usado para fins de estilo. Este post descreveu o procedimento relacionado à adição de uma classe ativa em JavaScript.