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

Esplora e condividi i dati di ricerca con Datazar

La quantità di dati su Internet è sbalorditiva e sembra aumentare di anno in anno. Ciò porta a nuovi settori, come i big data, utilizzando l'analisi per prevedere gli eventi e trovare punti dati degni di nota.Con uno strumento come Datazar, è possibile trovare, ordinare, analizzare e persino fornire dati a un unico repository centrale. Il

(Consigli tecnici e di design)

Top Invoice & Accounting Services per designer freelance

I freelance di solito gestiscono pochi lavori nello stesso periodo e il cliente non è l'unico motivo che fa impazzire i freelance. Essendo il tuo capo, gestisci il tuo lavoro e sfortunatamente anche tu sei il tuo contabile . A ogni progetto verranno addebitate commissioni diverse che daranno luogo a fatturazioni o fatture diverse che verranno spedite sulla tua strada e che potrebbero risultare dolorosamente disordinate se non lo facessi correttamente.

(Consigli tecnici e di design)