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

5 volte Internet Keyboard Warriors non ha salvato il giorno

Ci sono state diverse volte in cui le comunità di Internet si sono unite per fare incredibili quantità di bene. Basta dare un'occhiata a questi 'Internet Acts' per alcuni esempi.Ci sono persino momenti in cui cercano di combattere l'ingiustizia e i crimini che accadono al di fuori dello spazio virtuale, nel mondo reale.

(Consigli tecnici e di design)

15 comandi della riga di comando grafica (GCLI) in Firefox per sviluppatori front-end

(Consigli tecnici e di design)