Adicionar classe ao elemento clicado usando JavaScript

Ao criar uma página ou site responsivo, pode haver um requisito para anexar várias funcionalidades ou efeitos na ação do usuário ou automaticamente. Por exemplo, destacando uma seção ou elemento específico após o clique/mouse. Nessas situações, adicionar classe a um elemento clicado usando JavaScript é de grande ajuda para envolver os usuários em um site e fazê -lo (site) se destacar.

Este artigo discutirá as abordagens para adicionar uma classe a um elemento clicado usando JavaScript.

Como adicionar classe ao elemento clicado usando JavaScript?

O "addEventListener ()”Método, em combinação com o“Lista de classe”Propriedade e a“adicionar()”Método, pode ser aplicado para adicionar uma classe ao elemento clicado usando JavaScript.

O método addEventListener () associa um evento a um elemento. A propriedade Classlist fornece os nomes de classe CSS de um elemento. Considerando que o add () é um método de classe usado para adicionar tokens à lista.

Essas abordagens podem ser aplicadas para anexar um evento e adicionar uma classe ao (s) elemento (s) com base nesse evento.

Sintaxe

elemento.addEventListener (evento, ouça, use);

Na sintaxe dada:

• ““evento”Refere -se ao evento especificado.
• ““ouvir”É a função que precisa ser invocada.
• ““usar”É o valor opcional.

Vamos elaborar o conceito com a ajuda dos seguintes exemplos!

Exemplo 1: Adicione uma classe única ao elemento clicado em JavaScript

Neste exemplo, uma única classe será adicionada aos elementos clicados:

Clique em mim

No trecho de código acima:

• Em primeiro lugar, inclua o “" e "”Elementos, tendo as classes declaradas, respectivamente.
• Além disso, inclua um botão na próxima etapa.
• No bloco de código JS, aplique o “addEventListener ()”Método para anexar um evento“clique"Para a função chamada"ClassClicked ()”.
• Além disso, passe o objeto “evento”Como o parâmetro de uma função.
• Na definição da função, associe o “evento“Objeto com o“alvo" propriedade. Essas abordagens acessam os elementos DOM no gatilho do evento.
• Resultantemente, o associado “Lista de classe”Propriedade e“adicionar()”O método adicionará a classe especificada ao (s) elemento (s) ao clicar.
• No código CSS, estilize a classe a ser anexada, eu.e., Adicionadoclass.

Saída

Conforme observado na saída acima, ao clicar nos elementos, a classe específica é adicionada aos elementos.

Exemplo 2: Adicione várias classes ao elemento clicado em JavaScript

Neste exemplo em particular, várias classes serão adicionadas aos elementos clicados:

Site Linuxhint

JavaScript

Blogs

Aplique as etapas a seguir, conforme fornecido no código acima:

• Inclua o declarado “

  ”Elementos com as classes especificadas.

• No bloco de código JavaScript, da mesma forma, anexe um evento “clique”Para a função ClassClicked () usando o“addEventListener ()”Método.
• Lembre -se das abordagens discutidas para acessar elementos no DOM.
• Agora, aplique o “Lista de classe”Propriedade e“adicionar()”Método com várias classes como parâmetros.
• Isso resultará em anexar as várias classes declaradas ao (s) elemento (s) clicado (s).
• No código CSS, especifique as classes que precisam ser adicionadas ao (s) elemento (s) e execute o estilo declarado.

Saída

Nesta saída em particular, várias classes são anexadas a cada um dos “> ”Elementos no gatilho do evento.

Conclusão

O "addEventListener ()”Método, em combinação com o“Lista de classe”Propriedade e a“adicionar()”Método, pode ser aplicado para adicionar uma classe ao elemento clicado usando JavaScript. Essas abordagens podem ser implementadas para adicionar classes únicas ou múltiplas a (s) elementos (s) com base no evento anexado. Esta redação demonstrou adicionar uma classe ao elemento clicado usando JavaScript.