Legge til og fjerne HTML-klasser på forespørsel med jQuery

 // ## legg til klasse $ ('div'). addClass ('my-new-class'); // ## fjern klasse $ ('div'). removeClass ('my-new-class'); 

Vi kan også bruke standard JavaScript-kode for å legge til / fjerne HTML-klasser slik:

 // legg til klasse document.getElementById ('elem'). className = 'my-new-class'; // fjerne klassen document.getElementById ('elem'). className = document.getElementByTag ('div'). className.replace (/ (?: ^ | \ s) min nyklasses (?! \ S) / g, '') 

Koden som du ser ovenfor er mindre grei enn når vi gjør det med en JavaScript Framework jQuery. Men hvis du ikke vil stole på et rammeverk, kan du alltid bruke en ny JavaScript API kalt classList .

Bruker classList API

I likhet med jQuery, gir classList et sett med metoder som gjør at vi kan endre HTML-klasser.

I et tilfelle der det er en div med flere klasser, kan vi hente klassene som er tildelt i div ved hjelp av classList .

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

Når vi åpner nettleserkonsollen, kan vi se listen over klassene.

For å legge til og fjerne klasse, kan vi bruke .add() og .remove() .

 var elem = document.getElementByID ('elem'); // legg til klasse elem.classList.add ('my-new-class'); // fjern klasse elem.classList.remove ('my-new-class'); 

Legge til flere klasser kan også gjøres ved å skille hver klasse med et komma :

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

For å sjekke om enkelte elementer inneholder den angitte klassen, kan vi bruke .contains() . Det vil returnere sant hvis den oppgitte klassen er til stede, og returnere falsk hvis den ikke gjør det.

 elem.classList.contains ( 'klassenavn'); 

Vi kan også bytte klassen ved hjelp av .toggle() . Følgende .toggle() viser hvordan vi binder .toggle() med et museklikkhendelse.

 var-knappen = document.getElementById ('knappen'); funksjon veksle () {elem.classList.toggle ('bg'); } button.addEventListener ('klikk', veksle, falsk); 

Sjekk ut demoen i aksjon fra følgende linker.

• Se demo
• Last ned kilde

Endelig tanke

classList er en ny innfødt JavaScript API som også er introdusert sammen med HTML5. Det er pent og enkelt, og fungerer i følgende nettlesere: Firefox 3.6, Opera 11.5, og Chrome 8 og Safari 5.1. Det er imidlertid fraværende i Internet Explorer 9 og under, så du må kanskje bruke Polyfills når du implementerer classList API i Internet Explorer.

Videre ressurs

• ClassList API - HTML5 Doctor
• Element classList - MDN
• Notater om classList API

Facebook Tidslinjedeksel: 40 (Virkelig) Kreative eksempler

Bare hvis du ikke visste, er Facebook Timeline den siste funksjonen som ble introdusert i den nylige Facebook-konferansen, F8. Det er vanligvis en fullstendig overhaling av profilsiden med den nye muligheten til å vise statusoppdateringene i en liste sortert etter tid, derav navnet.Med denne nye funksjonen kommer en ny måte å introdusere deg selv om det er grafisk annet enn profilbilde, og vi kaller det Timeline Cover . O

(Tekniske og design tips)

Slik oppretter du WordPress-egendefinerte felt uten plugins

WordPress har gjort det enkelt for utviklere å tilpasse WordPress på så mange måter som de kan oppfylle sine egendefinerte behov, inkludert å la utviklere tildele nye metadata innenfor et innlegg. På den måten utvikler kan vise ytterligere utfall innenfor sine temaer eller plugins på toppen av standarddata som posttittel, innleggsinnhold og postforfatter.Det fin

(Tekniske og design tips)