Como alterar a classe de um elemento HTML com JavaScript?

Na fase de conceção de uma página web ou de um website, existem determinadas situações em que já não é necessário aceder a alguns elementos particulares devido a alguma atualização. Além disso, quando há a necessidade de atribuir mais de uma classe a um elemento específico em html. Nesses casos, alterar a classe de um elemento HTML em JavaScript é de grande ajuda para atender a tais situações.

Este blog demonstrará as abordagens a serem consideradas ao alterar a classe de um elemento HTML em JavaScript.

Como alterar a classe de um elemento HTML com JavaScript?

Para alterar a classe de um elemento HTML com JavaScript, as seguintes abordagens podem ser aplicadas:

• • “ nome da classe ' propriedade.
  • “ lista de classes ' propriedade.

Abordagem 1: alterar a classe de um elemento HTML com JavaScript usando a propriedade className

Essa abordagem pode entrar em vigor acessando a classe criada associada a um elemento e atribuindo a ele uma classe diferente.

O exemplo a seguir demonstra o conceito declarado.

Exemplo

No código abaixo fornecido dentro do “ ” , inclua o seguinte título no “

' marcação. Depois disso, crie o botão especificado ao qual será atribuído um padrão “ classe ” que será alterado posteriormente no código. Além disso, atribua a ele um “ Eu iria ” e um anexo “ ao clicar ” invocando a função Class().

Mais tarde no código, inclua a seguinte mensagem no “

” para exibi-lo no DOM após a transformação da classe:

Código HTML:

< corpo estilo = 'text-align: center;' >
< h2 > Alterar elemento Nome da classe de

O antigo nome da classe é: classe padrão

No código JS, declare uma função chamada “ Classe() ”. Aqui, acesse a classe padrão pelo seu id usando o “ document.getElementById() ” método. O ' nome da classe ” irá transformar a classe criada para a classe chamada “ newClass ”.

Finalmente, o ' Texto interno ” exibirá a seguinte mensagem junto com a classe alterada:

Código JS:

Resultado

Na saída acima, observe a mudança do “ classe ” à direita ao clicar no botão no DOM.

Abordagem 2: alterar a classe de um elemento HTML com JavaScript usando a propriedade classList

Essa abordagem específica pode ser implementada para remover a classe especificada e atribuir uma nova classe a ela, alterando-a.

Exemplo

Em primeiro lugar, repita os métodos discutidos acima para incluir um título, criando um botão com a classe atribuída, id e evento onclick anexado, invocando a função especificada. Em seguida, adicione da mesma forma a seção de título no “

” para notificar o usuário da classe alterada ao clicar no botão:

Código HTML

< corpo estilo = 'text-align: center;' >
< h2 > Alterar classe de elemento ! h2 >
< botão classe = 'Local na rede Internet' ao clicar = 'Classe()' Eu iria = 'mudança' > Clique em mim botão >
< h3 Eu iria = 'cabeça' estilo = 'cor de fundo: cinza claro;' > O nome da classe antiga é: Site h3 >
corpo >

Agora, declare uma função chamada “ Classe() ”. Em sua definição, aplique o “ lista de classes ” propriedade juntamente com o “ remover() ” para omitir a classe acessada chamada “ Local na rede Internet ” que corresponde ao botão criado.

Na próxima etapa, atribua uma nova classe à mesma classe usando a propriedade discutida com o “ adicionar() ” método. Por fim, exiba a classe alterada conforme discutido na abordagem anterior:

Código JS

função Classe ( ) {
document.getElementById ( 'mudança' ) .classList.remove ( 'Local na rede Internet' )
document.getElementById ( 'mudança' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'mudança' ) .classList;
document.getElementById ( 'cabeça' ) .innerHTML = 'Novo nome de classe é: ' + acesso;
}

Resultado

Este artigo pretendia esclarecer o conceito de alterar a classe do elemento HTML usando JavaScript.

Conclusão

O ' nome da classe ' e ' lista de classes ” podem ser utilizadas para alterar a classe de um elemento HTML. A propriedade className levou a uma abordagem mais rápida na execução do requisito desejado em comparação com a propriedade classList, pois envolvia menos complexidade de código. A propriedade classList, por outro lado, alterou a classe padrão com a ajuda de dois métodos adicionais. Este artigo ilustrou as abordagens para alterar a classe do elemento HTML com JavaScript.