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 passaggi per una ricerca Google più accurata ed efficiente

Vi siete mai chiesti quanti siti web ci sono nel mondo in questo momento? Secondo Pingdom, si tratta di un 255 milioni di urla a dicembre 2010! Un totale di 21, 4 milioni di siti Web sono stati creati solo lo scorso anno. Logicamente parlando, la nostra ricerca di siti web dovrebbe diventare esponenzialmente noiosa e difficile insieme agli anni, specialmente in un momento in cui l'accesso alle informazioni è più prezioso che mai.S

(Consigli tecnici e di design)

Tendenze del web design: come decidere cosa funziona

I designer amano lamentarsi di tendenze di design "superficiali" che non sentono di avere alcuna resistenza o di contribuire a qualcosa di significativo per l'industria. Ma hanno ragione?Oggi parleremo di tendenze del design e di nuovi fenomeni che coinvolgono molti designer, ma che possono anche attirare l'ira di altri che pensano che l'industria del design stia andando giù per i tubi.

(Consigli tecnici e di design)