Como alternar uma classe de elemento em JavaScript?

A palavra "alternar" significa alternar entre opções. Alternando uma classe de elemento refere -se à troca de uma classe com outra classe. Para esse fim, o alternar() o método é empregado para adicionar ou remover uma classe. É útil para exibir conteúdo nas páginas da web. Ele retorna um valor verdadeiro se uma classe for adicionada a ele. Enquanto ele retorna um valor falso para remover uma classe. Além disso, os usuários podem utilizar add (), conter (), e remover() Métodos para alternar uma classe de elemento. No guia de hoje, você aprenderá a alternar uma classe de elemento em JavaScript das seguintes maneiras:

• Usando o método Toggle () em JavaScript
• Usando os métodos add (), remover () e conter () em javascript

Como alternar uma classe de elemento em JavaScript?

Como outras linguagens de programação, JavaScript Fornece uma variedade de recursos para exibir conteúdo nas páginas da web. Para visibilidade do conteúdo do site, ele utiliza um recurso do alternar() método. O método recebe uma entrada do nome da classe e o alterna com a ajuda de elementos HTML.

Sintaxe

elemento.Lista de classe.alternar (ClassName)

JavaScript pode alternar a classe do elemento nome da classe empregando o Lista de classe propriedade. A propriedade atualizou dados se a classe for removida ou adicionada. Utilizando o elemento HTML, os usuários podem explorar o alternar() método.

Método 1: Usando o método Toggle () em JavaScript

Um exemplo é demonstrado utilizando o alternar() Método em JavaScript.

Código

Um exemplo de alternância de uma classe de elemento em JavaScript

aperte o botão
Bem -vindo ao JavaScript World.

A descrição do código acima está aqui:

Um botão chamado “aperte o botão”Está anexado com um MyFunction () método. Neste método, um método Toggle () é utilizado pela passagem das propriedades de “estilo”. Depois de pressionar o botão, o método Toggle () é chamado e aplica as propriedades do estilo à mensagem “Bem -vindo ao JavaScript World”.

Saída

Antes de pressionar o botão:

Depois de executar o código acima, a saída exibe um botão “aperte o botão”. Além disso, uma mensagem é exibida aqui “Bem -vindo ao JavaScript World”.

Depois de pressionar o botão:

Depois de pressionar o botão, o código JavaScript é executado no back -end e alterna o elemento div para “estilo”. Depois disso, observa -se que vários estilos estão incluídos na div.

Método 2: Usando métodos add (), remover () e conter ()

Outro exemplo é adaptado pela utilização dos métodos conter (), remover () e add () em javascript.

Código

Outro exemplo de alternância de um elemento de classe

Clique em mim

Bem -vindo ao JavaScript World

A descrição do código é como abaixo.

• Neste código, u_method () é usado para obter o elemento HTML no p variável.
• Depois disso, o conter() o método é utilizado para avaliar se o método é acionado ou não.
• Se ele contiver o evento, use o remover() Método para desativar o evento.
• Caso contrário, o adicionar() O método é usado para adicionar o evento de alternância.

Saída

Antes de pressionar o botão:

Depois de pressionar o botão “Por favor, pressione o botão”, um elemento de classe é alterado usando o add (), remova (), e conter() Métodos em JavaScript.

Depois de pressionar o botão:

Clicando no “Por favor, pressione o botão” Botão, uma mensagem “Bem -vindo ao mundo JavaScript” é exibido usando o add (), remova (), e conter() Métodos em JavaScript.

Conclusão

Alternando um classe de elemento é um processo de adição ou remoção de uma classe, utilizando os elementos em JavaScript. Para alternar uma classe de elemento no JavaScript, você pode usar o método Toggle () ou Utilizar Add (), Remover () e Conter () Métodos. A classe contém um conjunto de propriedades aplicadas a elementos.