JavaScript Verificare se un Elemento ha una Classe

Chi sviluppa siti web ed utilizza JavaScript per programmare le proprie pagine sa benissimo quanto sia importante utilizzare le classi come selettori per più elementi dello stesso tipo.

Tuttavia, gestire le classi senza l’utilizzo di Framework come JQuery ma con pure JavaScript risulta un tantino più complicato, e richiede quindi l’utilizzo di altre tecniche.

In questa guida spiegherò cine verificare se un elemento conosciuto all’interno di una pagina HTML possieda una specifica classe, utilizzando poche righe di codice di puro JavaScript.

Verificare se un elemento HTML ha una classe con JS

Le classi CSS come abbiamo visto in questo articolo hanno vari scopi, e consentono ad uno sviluppatore di assegnare stili e comportamenti a più elementi contemporaneamente. Con JavaScript possiamo facilmente modificare e selezionare gli elementi con una specifica classe CSS per ampliare le funzionalità delle nostre pagine. Infatti, attraverso varie tecniche possiamo assegnare o rimuovere a nostro piacimento le classi da uno o più elementi.

Prima di assegnare una classe ad un elemento HTML è buona regola controllare se questo non l’abbia già. Per eseguire questa verifica con del puro codice JavaScript bisogna fare in questo modo:

var elemento = document.getElementById('myElem');

if(elemento.classList.contains('myclass')){
  // l'elemento ha la classe
}else{
   // l'elemento non ha la classe
}

Come si può vedere nello sketch, per gestire le classi assegnate ad un elemento, bisogna usare la proprietà classList, insieme al metodo contains(), che restituisce un valore booleano (vero o falso) nel caso in cui l’elemento possieda o no la classe indicata.

Questo consentirà poi di assegnare o rimuovere liberamente la classe CSS interessata dall’elemento, in questo modo:

var elemento = document.getElementById('myElem');

if(elemento.classList.contains('myclass')){
  elemento.classList.remove('myclass');   // rimuove la classe
}else{
  elemento.classList.add('myclass');   // aggiunge la classe
}

Nota: Attraverso questi semplici metodi JavaScript nativi si potranno implementare facilmente nuove funzionalità senza l’utilizzo di framework così da alleggerire il carico della pagina web durante il caricamento.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA