Aggiunta e rimozione di classi HTML su richiesta con jQuery

 // ## aggiungi class $ ('div'). addClass ('my-new-class'); // ## remove class $ ('div'). removeClass ('my-new-class'); 

Possiamo anche utilizzare il codice JavaScript standard per aggiungere / rimuovere classi HTML in questo modo:

 // aggiungi class document.getElementById ('elem'). className = 'my-new-class'; // remove class document.getElementById ('elem'). className = document.getElementByTag ('div'). className.replace (/ (?: ^ | \ s) my-new-class (?! \ S) / g, '') 

Il codice che puoi vedere sopra è meno semplice di quando lo stiamo facendo con un jQuery di JavaScript Framework. Ma se non vuoi fare affidamento su un framework, puoi sempre utilizzare una nuova API JavaScript chiamata classList .

Utilizzo dell'API classList

Simile a jQuery, classList fornisce un insieme di metodi che ci permettono di modificare le classi HTML.

Nel caso in cui vi sia un div con più classi, possiamo recuperare le classi che sono state assegnate nel div usando classList .

 var classes = document.getElementByID ('elem'). classList; console.log (classi); 

Quando apriamo la Console del browser, possiamo vedere l'elenco delle classi.

Per aggiungere e rimuovere classi, possiamo usare .add() e .remove() .

 var elem = document.getElementByID ('elem'); // aggiungi class elem.classList.add ('my-new-class'); // rimuove class elem.classList.remove ('my-new-class'); 

L'aggiunta di più classi può anche essere eseguita separando ogni classe con una virgola :

 elem.classList.add ('my-new-class', 'my-other-class'); 

Per verificare se certi elementi contengono la classe specificata, possiamo usare .contains() . Restituisce true se la classe specificata è presente e restituisce false se non lo è.

 elem.classList.contains ( 'class-name'); 

Possiamo anche cambiare la classe usando .toggle() . Il seguente frammento di codice mostra come .toggle() metodo .toggle() con un clic del mouse.

 var button = document.getElementById ('button'); function toggle () {elem.classList.toggle ('bg'); } button.addEventListener ("click", toggle, false); 

Guarda la demo in azione dai seguenti link.

• Visualizza la demo
• Scarica fonte

Pensiero finale

classList è una nuova API JavaScript nativa che viene anche introdotta insieme a HTML5. È pulito e semplice e funziona nei seguenti browser: Firefox 3.6, Opera 11.5 e Chrome 8 e Safari 5.1. È tuttavia assente in Internet Explorer 9 e versioni successive, quindi potrebbe essere necessario utilizzare Polyfill quando si implementa l'API classList in Internet Explorer.

Ulteriori risorse

• L'API classList - HTML5 Doctor
• Element classList - MDN
• Note sull'API classList

Codemade è un sito di condivisione di progetti Tech in stile Pinterest

La maggior parte degli sviluppatori di frontend si affida a GitHub per le loro esigenze quotidiane di condivisione del codice . Ma, per quanto riguarda la costruzione di progetti per una comunità di tecnici più tecnici?Questo è l'obiettivo di Codemade, una piattaforma gratuita in stile Pinterest per condividere progetti interessanti . I

(Consigli tecnici e di design)

15 scene di Star Wars reimmaginate con Lego

Per alcuni di noi, i Lego possono essere quelle mine indistruttibili trovate sulle scale e nella stanza dei giocattoli dei bambini. Ma usali bene, e si trasforma in qualcosa di magico - ad es. Build Lego a tema cinematografico, mega costruzione Lego o fantastici robot Lego - a volte incredibili. Ma non hai ancora visto Lego in questo modo

(Consigli tecnici e di design)