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

Flexbox Patterns: Den ultimate CSS Flexbox Code Library

Den nyeste CSS Flexbox-egenskapen har radikalt endret måten utviklere skaper grensesnitt på. Ingen flere flyter og CSS hacks å få layouter justert perfekt. Ikke lenger bekymre deg for tilpassede responsive teknikker for å håndtere flerkolonneformede layouter.Men selv om flexbox løser mange problemer, er det også komplisert å lære. For å hj

(Tekniske og design tips)

Flyte er en LightBulb som lever, og det er kult

Hva er det første som kommer til å tenke når du ser dette? La meg hjelpe: Hvordan er denne lyspæren flyter på toppen av den basen? For det andre, er det i blått å holde denne lyspæren opplyst?Magic.Vel, det magiske av magnetisk levitasjon og trådløs kraftoverføring, for å være presis. At LED-lyspæren holdes oppladet av en elektromagnet, og den lyser opp trådløst - se meg, ingen batterier eller strømkabler.Dette er Kicksta

(Tekniske og design tips)