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

Nyttige Microsoft Word og Microsoft Excel maler

Jeg tror en fremtredende funksjon som de fleste Microsoft Word og Excel-brukere virkelig savnet, er muligheten til å bruke mal. Mal, for eksempel budsjettplanleggeren, gir deg en komplett plattform for å taste inn budsjettet, i stedet for å bygge alt fra grunnen, slik at du kan investere mer tid på å planlegge kick-ass budsjettplan.Selv

(Tekniske og design tips)

20 gratis sømløse ikon mønstre for designere

Mange webdesigntrender kommer og går, men mønstre og teksturer er alltid rundt i forskjellige former. Riktig bruk av et mønster kan legge til dybde, personlighet og interesse for designet. Forskjellen mellom mønster og tekstur er at de fleste mønstre er digitalt opprettet, og det er mange eksempler for å illustrere det i dette innlegget.Her e

(Tekniske og design tips)