Nogle gange er du nødt til at lære noget lille og simpelt for at starte en rejse til at lære noget stort og komplekst. JavaScript er enormt og komplekst, men du kan baby træde ind i det ved at lære små og enkle ting. Hvis du er en webdesigner, tror jeg, at der især er en ting, du kan lære, der er ekstremt bemyndigende.
Dette er den ting, jeg vil have dig til at lære: Når du klikker på et eller andet element, skal du ændre en klasse på et eller andet element.
Kog det ned til det absolutte væsentlige, forestil dig, at vi har en knap og en div:
Click Me I'm an element Div kan have nogle basisstile, og det kan have nogle stilarter, når den har en bestemt klasse:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Skarpe CSS-tricksters genkender måske dette som en mulighed for afkrydsningsfelthacket, men det er ikke det, vi arbejder på i dag.
Vi ønsker at vedhæfte en "begivenhedslytter" til knappen: lidt kode til "at lytte" til, i vores tilfælde klikhændelser, og når det sker, kør mere kode.
Du ved, hvordan vi i CSS skal “vælge” elementer for at style dem? Vi skal også gøre det i JavaScript for at vedhæfte vores begivenhedslytter. Vi opretter en "reference" til knappen, som en variabel, som denne:
var button = document.querySelector("button");Nu hvor vi har en henvisning til knappen, vedhæfter vi den begivenhedslytter:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Og hvad vil vi gøre i tilfælde af et klik? Føj et holdnavn til vores div! Men ligesom vi havde brug for en reference til knappen for at kunne gøre ting med den, har vi også brug for en reference til div. Lad os gøre dem begge på samme tid, 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 ville vise dig. Med nogle CSS tilføjet til den "yay" klasse, kan vi falme ind og ud af div:
Se penneklik på noget / skift klasse af Chris Coyier (@chriscoyier) på CodePen.
Hvorfor denne ene ting?
Designmulighederne er uendelige, når du styrer CSS og tilstanden for ethvert element (hvilke klassenavne det har). At skjule og afsløre ting er den åbenlyse kraft, men det kan virkelig være hvad som helst.
Leveling Up
Husk at du ikke er begrænset til at ændre et holdnavn. Du kan ændre flere klasser på et enkelt element eller ændre klasser på flere elementer.
Se mere på classList-ejendommen. "Skift" er ikke den eneste mulighed.
Ligesom HTML og CSS har JavaScript forskellige niveauer af browsersupport til ting. Se på browserstøtten til classList, og tilføj addEventListener. Er du okay med disse niveauer af support til dit projekt? Hvis ikke, kan du se på polyfills eller endda jQuery.
Vi brugte "klik" -hændelsen, men der er masser af andre. Andre musebegivenheder, rulning, tastatur og meget mere. Mange hundrede.
Den metode, vi brugte til at vælge, var document.querySelector. Dette var nyttigt, fordi det returnerer et enkelt element, som vi kan arbejde med. Plus, vælgerne, du giver det, er ligesom CSS-vælgere. document.querySelector("#overlay .modal > h2");ville være et legitimt valg. Dette er ikke den eneste metode til at vælge, men der er andre som getElementById, querySelectorAll, getElementsByClassName og meget mere.
Her er et eksempel på, hvor vi vælger en masse navigationselementer og vedhæfter en klikhåndtering til dem alle på én gang:
Se Pen Change Classes on Stuff af Chris Coyier (@chriscoyier) på CodePen.
Hvis JavaScriptet, som vi skrev i vores lille eksempel, ikke kunne indlæses af en eller anden grund, ville vi stadig have en knap, der siger "Klik på mig". Men at klikke på det ville ikke gøre en hel del meget, ville det? Måske kunne vi indsætte den knap med JavaScript, så knappen ikke engang er der, medmindre vi ved, at den vil fungere? God idé, ikke? ;)