Como alternar a classe usando javascript puro em html?

Alternar uma classe usando javascript puro em html é útil quando você deseja alterar a aparência de um elemento com base em uma determinada condição, como a interação do usuário. Por exemplo, alterando a cor de fundo da página ou botão no evento de clique. Alternar uma classe permite fazer alterações dinamicamente, sem precisar atualizar a página. Isso pode ajudar a aumentar a experiência do usuário, fazendo com que as mudanças pareçam mais suaves e mais receptivas.

Este post ilustrará o procedimento para alternar a classe usando JavaScript.

Como alternar a classe CSS usando javascript puro em html?

Para alternar as aulas usando javascript puro, utilize o “alternar()”Método do“Lista de classe”Atributo/propriedade. O método Toggle () aceita um nome de classe como um parâmetro. Alternar uma classe significa alternar a presença de uma classe em um elemento em html. Envolve verificar se uma classe estiver presente em um elemento e, se for, removendo -a. Se a classe não for atribuída ao elemento, é adicionado.

Exemplo 1: Altere a cor do elemento por classe TOGGL usando JavaScript Pure em HTML
No exemplo a seguir, alteraremos a cor de fundo do botão no botão Clique em alternar a classe.

Primeiro, crie um botão e atribua um ID “btn”Para estilizar o botão. Anexe um “ONCLICK”Evento que invocará o“classtoggle ()”Função no botão Clique:

Botão

No arquivo CSS, crie um ID “btn”Para estilizar o botão:

#btn
preenchimento: 3px;
margem: 2px;
Font-Family: Sans-Serif;
Radio de fronteira: .5REM;

Crie uma classe chamada “amarelo”Para definir a cor de fundo do elemento:

.amarelo
cor de fundo: amarelo;

No arquivo JavaScript, defina uma função “classtoggle ()"Que vai chamar o"alternar()”Método do“Lista de classe”Propriedade para alternar a classe de botão:

function classtoggle ()
documento.getElementById ("btn").Lista de classe.alternar ("amarelo");

Como você pode ver na saída enquanto clica no botão, a cor do plano de fundo muda, indica que o “amarelo”A classe foi atribuída com sucesso ao botão usando o“alternar()”Método do“Lista de classe" propriedade:

Exemplo 2: Altere a fonte do elemento da classe TOGGL usando JavaScript Pure em HTML
No exemplo dado, alternaremos a classe CSS para alterar o texto no evento de clique do botão.

Em um arquivo html, crie um

tag para mostrar algum texto e um botão. Atribua um ID “Bem-vindo”Para o texto que ajuda a obter o texto e atribuir uma classe usando o método de alternância:

Bem -vindo ao Linuxhint

Clique

Crie uma classe CSS “texto”Isso mudará a cor e o tamanho da fonte do texto:

.texto
tamanho da fonte: 30px;
Cor: #06b5f5;

Defina uma função “classtoggle ()”Para atribuir a classe“texto" para o

Elemento de tag no botão Clique que será recuperado usando o ID atribuído com a ajuda de “getElementById ()”Método.

function classtoggle ()
documento.getElementById ("Welcome").Lista de classe.alternar ("texto");

Pode -se ver que o “texto”A classe é atribuída ao texto especificado clicando no botão:

Fornecemos todas as instruções essenciais relevantes para alternar a classe usando javascript puro em html.

Conclusão

Para alternar a classe usando javascript puro em html, use o “alternar()”Método do“Lista de classe" propriedade. Ajuda a atribuir uma classe ao elemento se for atribuído a ele. Este post ilustrou o procedimento para alternar as aulas usando JavaScript.