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

8 JavaScript-biblioteker for å animere SVG

SVG er en oppløsningsuavhengig grafikk. Det betyr at det vil se bra ut på hvilken som helst type skjerm uten å ha noe tap av kvalitet . Utover det kan du også gjøre SVG levende med noen animasjonseffekter.I et av innleggene i vår SVG-serie tidligere har vi vist deg hvordan SVG-animasjon fungerer med element om enn på lavt nivå. Denne

(Tekniske og design tips)

Slik gjør du en omvendt e-postsøk

Hvis du noen gang mottar en epost fra en ukjent person og vil vite om hvem som er bak denne e-posten, kan du enkelt gjøre det gjennom et omvendt e-postsøk.Et omvendt e-postsøk lar deg kjenne all informasjon om avsenderen som han / hun noensinne har offentliggjort hvor som helst på internett. Og for å hjelpe deg med omvendt e-postoppslag, vil jeg vise deg forskjellige metoder for å spore hvem som står bak en e-postadresse.1. Gjø

(Tekniske og design tips)