Adicionar uma propriedade de classe a um elemento ajuda o desenvolvedor a criar uma experiência de usuário dinâmica na página da web. Quando uma propriedade de classe é adicionada a um elemento, esse elemento selecionado assumirá o estilo associado a esse nome de classe.
Pense em um usuário clicando em um botão. Quando o botão é clicado, queremos que uma seção da página da Web seja alterada de acordo com nossa folha de estilo CSS. Você pode atribuir um nome de classe associado a este estilo ao elemento para alterar sua aparência após clicar no botão.
Criar uma experiência interativa é importante em toda programação front-end. Neste guia, exploraremos duas maneiras de adicionar um nome de classe a um elemento selecionado em JavaScript simples. Eventualmente, você poderá usar esta ferramenta em seus projetos.
Como usar JavaScript Adicionar classe
Em JavaScript, adicionar um nome de classe pode ser feito de duas maneiras. Primeiro, vamos selecionar o elemento HTML desejado. Então temos a opção de usar a propriedade className ou add() para adicionar o nome da classe ao elemento. Analisaremos a sintaxe e a usaremos na próxima seção.
Lembre-se de que estamos usando JavaScript simples aqui. Não são necessárias bibliotecas. Como usamos JavaScript regularmente, é uma prática comum envolver a lógica acima em uma função e passar essa função para um manipulador de eventos. Isso garantirá que a função para adicionar o nome da classe ocorra somente após a ocorrência de um evento específico.
Quanto aos elementos HTML, eles podem ter vários nomes de classe. Isso é útil para lembrar que podemos adicionar nomes de classe a elementos que já possuem outros nomes ou IDs de classe. Tudo o que precisamos ter em mente é que o estilo está associado ao qual a classe nomeia em nosso projeto e adicionamos os nomes aos elementos aos quais queremos aplicar o estilo.
