Noen ganger, for å starte en reise til å lære noe stort og komplekst, må du lære noe lite og enkelt. JavaScript er stort og komplekst, men du kan babyen gå inn i det ved å lære små og enkle ting. Hvis du er en webdesigner, tror jeg det er spesielt en ting du kan lære som er ekstremt bemyndigende.
Dette er den tingen jeg vil at du skal lære: Når du klikker på et eller annet element, bytt klasse på et eller annet element.
Kok det ned til det absolutte, tenk at vi har en knapp og en div:
Click Me I'm an element Div kan ha noen basestiler, og den kan ha noen stiler når den har en bestemt klasse:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Skarpe CSS-Tricksters anerkjenner kanskje dette som en mulighet for avkrysningsruten, men det er ikke det vi jobber med i dag.
Vi ønsker å knytte en "hendelseslytter" til knappen: litt kode å "lytte" til, i vårt tilfelle klikkhendelser, og når det skjer, kjør mer kode.
Du vet hvordan vi i CSS må "velge" elementer for å style dem? Vi må gjøre det i JavaScript også for å legge ved lytteren vår. Vi lager en "referanse" til knappen, som en variabel, slik:
var button = document.querySelector("button");Nå som vi har en referanse til knappen, legger vi ved den hendelseslytteren:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Og hva vil vi gjøre i tilfelle et klikk? Legg til et kursnavn i div! Men akkurat som vi trengte en referanse for knappen for å gjøre ting med den, trenger vi også en referanse for div. La oss gjøre dem begge samtidig, her er hele koden:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Det er det hele jeg ønsket å vise deg. Med noen CSS lagt til den "yay" klassen, kan vi falme inn og ut div:
Se Pen Click Something / Change Class av Chris Coyier (@chriscoyier) på CodePen.
Hvorfor denne ene tingen?
Designmulighetene er uendelige når du kontrollerer CSS og tilstanden til ethvert element (hvilke klassenavn det har). Å skjule og avsløre ting er den åpenbare kraften, men det kan virkelig være hva som helst.
Leveling Up
Husk at du ikke er begrenset til å endre ett kursnavn. Du kan endre flere klasser på et enkelt element eller endre klassene på flere elementer.
Se nærmere på eiendommen classList. “Toggle” er ikke det eneste alternativet.
Akkurat som HTML og CSS, har JavaScript forskjellige nivåer av nettleserstøtte for ting. Se på nettleserstøtten for classList og legg til addEventListener. Er du OK med disse nivåene av støtte for prosjektet ditt? Hvis ikke, kan du se på polyfills, eller til og med jQuery.
Vi brukte "klikk" -hendelsen, men det er mange andre. Andre mushendelser, rulling, tastatur og mer. Mange hundre.
Metoden vi brukte for å velge var document.querySelector. Dette var nyttig fordi det returnerer et enkelt element for oss å jobbe med. I tillegg er velgerne du gir den akkurat som CSS-velgerne. document.querySelector("#overlay .modal > h2");ville være et legitimt utvalg. Dette er ikke den eneste metoden for å velge, det er andre som getElementById, querySelectorAll, getElementsByClassName og mer.
Her er et eksempel på hvor vi velger en haug med navigasjonselementer og fester en klikkbehandler til dem alle samtidig:
Se Pen Change Classes on Stuff av Chris Coyier (@chriscoyier) på CodePen.
Hvis JavaScript som vi skrev i det lille eksemplet vårt ikke kunne lastes inn av en eller annen grunn, ville vi fortsatt ha en knapp som sier "Klikk meg". Men å klikke på det ville vel ikke gjort mye? Kanskje vi kunne sette inn den knappen med JavaScript, så knappen er ikke engang der med mindre vi vet at den vil fungere? God idé, ikke sant? ;)