Como adicionar classe ativa em javascript

Ao desenvolver um site, às vezes seu código se torna tão longo e complexo que você não pode adicionar ou remover IDs ou aulas CSS. Para enfrentar essas situações, você pode usar o JavaScript para adicionar classes ativas para estilo ou cumprir outros fins. O JavaScript fornece métodos diferentes para resolver o problema complexo declarado instantaneamente.

Este manual explicará o procedimento de adicionar uma classe ativa em JavaScript.

Como adicionar classe ativa em javascript?

Para adicionar uma classe ativa, usaremos os seguintes métodos:

• documento.getElementById ()
• documento.QuerySelector ()

Vamos ir ao primeiro método!

Método 1: Use o documento.getElementById () com classe de classe.Método Add () para adicionar classe ativa no JavaScript

Em JavaScript, o “documento.getElementById ()”O método é usado para acessar um determinado elemento por seu id. No entanto, ele seleciona apenas os elementos com base em seus IDs, não em aulas. Você pode usá -lo com o “Lista de classe.adicionar()”Método para adicionar uma classe ativa em JavaScript.

Vamos explorar este método tomando um exemplo.

Exemplo

Em nosso arquivo html, levaremos o “

”Tag com algum texto, especifique seu ID como“TXT”, E adicione um“ONCLICKEvento que acionará o “ativar()”Função. Observe que, adicione o

tag dentro da tag:

Toque aqui

No arquivo JavaScript, defina a função Activate () de forma que ele acesse primeiro o elemento de parágrafo usando seu ID no documento.getElementById () método. Em seguida, adicione uma classe CSS à sua lista de classe para fins de estilo:

função ativate ()
var a = documento.getElementById ("txt");
a.Lista de classe.add ("newclass");

No arquivo CSS, coloque um ponto antes de “Newclass"E atribuir o"cor de fundo”Propriedade um valor“laranja”:

.newclass
cor de fundo: laranja;

Como resultado, quando você clicar no elemento do parágrafo, a propriedade de fundo adicionada será aplicada a ele:

Vamos dar uma olhada no seguinte método em que usaremos o documento.querySelector () para adicionar uma classe ativa.

Método 2: Use o documento.QuerySelector () com classe de classe.Método Add () para adicionar classe ativa no JavaScript

Em JavaScript, o “documento.QuerySelector ()”O método é utilizado para obter o primeiro elemento do código. Você pode especificar classes e IDs tanto dentro do método queryselector (). Pode ser usado com o “Lista de classe.adicionar()”Método para adicionar uma classe ativa em JavaScript.

Exemplo

Agora vamos usar apenas o “documento.QuerySelector ()"Com id"#TXT”Para selecionar o elemento de parágrafo. Novamente, a lista de classe.o método add () será usado para adicionar o ativo “Newclass”:

função ativate ()
var a = documento.QuerySelector ("#txt");
a.Lista de classe.add ("newclass");

Saída

Aprendemos dois métodos mais simples para adicionar classe ativa no JavaScript

Conclusão

Para adicionar aula ativa, podemos utilizar o “getElementById ()" ou "QuerySelector ()”Com a lista de classe.Método Add (). Ambos os métodos mencionados recebem elementos pela sua identificação primeiro e depois usando a lista de classe.Método Add (), o novo nome da 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.