Aggiungi la classe all'elemento cliccato usando JavaScript

Durante la creazione di una pagina Web o un sito reattiva, può esserci un requisito per aggiungere varie funzionalità o effetti sull'azione dell'utente o automaticamente. Ad esempio, evidenziando una sezione o un elemento specifico su clic/hover. In tali situazioni, l'aggiunta di classe a un elemento cliccato tramite JavaScript è di grande aiuto per coinvolgere gli utenti su un sito Web e far risaltare (sito).

Questo articolo discuterà gli approcci per aggiungere una classe a un elemento cliccato usando JavaScript.

Come aggiungere la classe all'elemento cliccato usando JavaScript?

IL "addEventListener ()"Metodo, in combinazione con il"classlist"Proprietà e"aggiungere()"Metodo, può essere applicato per aggiungere una classe all'elemento cliccato usando JavaScript.

Il metodo AddeventListener () associa un evento a un elemento. La proprietà ClassList fornisce i nomi delle classi CSS di un elemento. Considerando che l'add () è un metodo di classlist utilizzato per aggiungere token all'elenco.

Questi approcci possono essere applicati per allegare un evento e aggiungere una classe agli elementi in base a quell'evento.

Sintassi

elemento.addEventListener (evento, ascolto, uso);

Nella sintassi data:

• "evento"Si riferisce all'evento specificato.
• "Ascoltare"È la funzione che deve essere invocata.
• "utilizzo"È il valore opzionale.

Elaboriamo il concetto con l'aiuto dei seguenti esempi!

Esempio 1: Aggiungi una singola classe all'elemento cliccato in JavaScript

In questo esempio, una singola classe verrà aggiunta agli elementi cliccati:

Cliccami

Nel frammento di codice sopra:

• In primo luogo, includi il "" E ""Elementi, con le classi dichiarate, rispettivamente.
• Inoltre, includi un pulsante nel passaggio successivo.
• Nel blocco di codice JS, applica il "addEventListener ()"Metodo per allegare un evento"clic"Alla funzione denominata"ClassClicked ()".
• Inoltre, passa l'oggetto "evento"Come parametro di una funzione.
• Nella definizione della funzione, associare il "evento"Oggetto con il"bersaglio" proprietà. Questi approcci accedono agli elementi DOM sul trigger dell'evento.
• Di conseguenza, il "associatoclasslist"Proprietà e"aggiungere()"Il metodo aggiungerà la classe specificata agli elementi a clic.
• Nel codice CSS, modella la classe da aggiungere, io.e., Class aggiunto.

Produzione

Come osservato nell'output sopra, facendo clic sugli elementi, la particolare classe viene aggiunta agli elementi.

Esempio 2: Aggiungi più classi all'elemento cliccato in JavaScript

In questo esempio particolare, verranno aggiunte più classi agli elementi cliccati:

Sito Web LinuxHint

JavaScript

Blog

Applicare i seguenti passaggi, come indicato nel codice sopra:

• Includere il dichiarato "

  "Elementi con le classi specificate.

• Nel blocco di codice JavaScript, allo stesso modo, allega un evento "clic"A Funzione ClassClicked () usando il"addEventListener ()" metodo.
• Ricorda gli approcci discussi per l'accesso agli elementi sul DOM.
• Ora, applica il "classlist"Proprietà e"aggiungere()"Metodo con più classi come parametri.
• Ciò comporterà l'avvio delle più classi dichiarate agli elementi cliccati.
• Nel codice CSS, specificare le classi che devono essere aggiunte agli elementi ed eseguire lo stile dichiarato.

Produzione

In questo particolare output, più classi vengono aggiunte a ciascuno dei "> "Elementi sul grilletto dell'evento.

Conclusione

IL "addEventListener ()"Metodo, in combinazione con il"classlist"Proprietà e"aggiungere()"Metodo, può essere applicato per aggiungere una classe all'elemento cliccato usando JavaScript. Questi approcci possono essere implementati per aggiungere classi singole o più agli elementi in base all'evento allegato. Questo articolo ha dimostrato di aggiungere una classe all'elemento cliccato usando JavaScript.