Como mudar a classe de um elemento HTML com JavaScript?
Na fase de projetar uma página da web ou um site, existem certas situações em que você não precisa mais acessar alguns elementos específicos devido a algumas atualizações. Além disso, quando há necessidade de atribuir mais de uma classe a um elemento específico em html. Nesses casos-cenários, mudar a classe de um elemento HTML em JavaScript é de grande ajuda para atender a essas situações.
Este blog demonstrará as abordagens a serem consideradas ao alterar a classe de um elemento HTML em JavaScript.
Como mudar 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 classe" propriedade.
Abordagem 1: Altere 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 -lhe uma classe diferente.
O exemplo a seguir demonstra o conceito declarado.
Exemplo
No código abaixo do rumo dentro do “”Tag, inclua o seguinte cabeçalho no“" marcação. Depois disso, crie o botão especificado que será atribuído um padrão “aula”Que será alterado posteriormente no código. Além disso, atribua um “eu ia”E um anexo“ONCLICKEvento invocando a classe de função ().
Posteriormente no código, inclua a seguinte mensagem no “ Código HTML: Alterar o nome da classe do elemento O nome da classe antiga é: classe padrão Finalmente, o "InnerText”A propriedade exibirá a seguinte mensagem junto com a classe alterada: Código JS: Abordagem 2: Altere 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, mudando assim. 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 na “ Código HTML Mudar de classe de elemento! 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 Conclusão O "nome da classe" e "Lista de classe”As propriedades podem ser utilizadas para alterar a classe de um elemento HTML. A propriedade ClassName levou a uma abordagem mais rápida para executar o requisito desejado em comparação com a propriedade da lista de classe, pois envolveu menos complexidade do código. A propriedade Classlist, por outro lado, mudou 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.
ClickMe
No código JS, declare uma função chamada “Aula()”. Aqui, acesse a classe padrão por seu ID usando o “documento.getElementById ()”Método. O "nome da classe”A propriedade transformará a classe criada para a classe chamada“Newclass”.classe de função ()
documento.getElementById ('MyButton').ClassName = "Newclass";
var acesso = documento.getElementById ('MyButton').nome da classe;
documento.getElementById ('cabeça').INNERHTML = "O novo nome da classe é:" + Access;
Saída
Na saída acima, observe a mudança do “aula”À direita ao clicar no botão em DOM.O nome da classe antiga é: site
Agora, declare uma função chamada “Aula()”. Em sua definição, aplique o “Lista de classe”Propriedade junto com a“remover()”Método para omitir a classe acessada chamada“Local na rede Internet”Que corresponde ao botão criado.classe de função ()
documento.getElementById ('mudança').Lista de classe.Remover ("Site")
documento.getElementById ('mudança').Lista de classe.add ("linuxhint");
var acesso = documento.getElementById ('mudança').lista de classe;
documento.getElementById ('cabeça').INNERHTML = "O novo nome da classe é:" + Access;
Saída
Esta redação destinou-se a limpar o conceito de alterar a classe do elemento HTML usando JavaScript.