Soms, om een reis te beginnen om iets groots en ingewikkelds te leren, moet je iets kleins en eenvoudigs leren. JavaScript is enorm en complex, maar je kunt er een beetje in stappen door kleine en eenvoudige dingen te leren. Als je een webdesigner bent, denk ik dat er één ding in het bijzonder is dat je kunt leren dat buitengewoon krachtig is.
Dit is wat ik wil dat je leert: Als je op een element klikt, verander dan een klasse op een bepaald element.
Stel je voor dat we een knop en een div hebben:
Click Me I'm an element De div kan enkele basisstijlen hebben en het kan enkele stijlen hebben als het een bepaalde klasse heeft:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Scherpe CSS-Tricksters herkennen dit misschien als een kans voor de checkbox-hack, maar dat is niet waar we vandaag aan werken.
We willen een "event listener" aan de knop koppelen: een stukje code om te "luisteren" naar, in ons geval, click events, en als dat gebeurt, voer je meer code uit.
Weet je hoe we in CSS elementen moeten “selecteren” om ze op te maken? We moeten dat ook in JavaScript doen om onze gebeurtenislistener bij te voegen. We maken een "verwijzing" naar de knop, als een variabele, zoals deze:
var button = document.querySelector("button");Nu we een verwijzing naar de knop hebben, voegen we die gebeurtenislistener toe:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));En wat willen we doen bij een klik? Voeg een klassenaam toe aan onze div! Maar net zoals we een referentie voor de knop nodig hadden om er dingen mee te doen, hebben we ook een referentie voor de div nodig. Laten we ze allebei tegelijkertijd doen, hier is het hele stukje code:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Dat is het hele ding dat ik je wilde laten zien. Met wat CSS toegevoegd aan die "yay" -klasse, kunnen we de div in- en uitschakelen:
Zie de Pen Click Something / Change Class door Chris Coyier (@chriscoyier) op CodePen.
Waarom dit ene ding?
De ontwerpmogelijkheden zijn eindeloos als u de CSS en de status van elk element (welke klassenamen het heeft) beheert. Dingen verbergen en onthullen is de voor de hand liggende kracht, maar het kan echt van alles zijn.
Nivellering
Onthoud dat u niet beperkt bent tot het wijzigen van de naam van één klas. U kunt meerdere klassen op een enkel element wijzigen of de klassen op meerdere elementen wijzigen.
Kijk meer naar de eigenschap classList. "Toggle" is niet de enige optie.
Net als HTML en CSS heeft JavaScript verschillende niveaus van browserondersteuning voor dingen. Kijk in de browserondersteuning voor classList en voeg addEventListener toe. Gaat het goed met die mate van ondersteuning voor uw project? Als dit niet het geval is, kunt u polyfills of zelfs jQuery bekijken.
We gebruikten de "klik" -gebeurtenis, maar er zijn er nog veel meer. Andere muisgebeurtenissen, scrollen, toetsenbord en meer. Vele honderden.
De methode die we hebben gebruikt voor het selecteren was document.querySelector. Dit was handig omdat het een enkel element retourneert waarmee we kunnen werken. Bovendien zijn de selectors die u eraan geeft, net als CSS-selectors. document.querySelector("#overlay .modal > h2");zou een legitieme selectie zijn. Dit is echter niet de enige methode om te selecteren, er zijn andere zoals getElementById, querySelectorAll, getElementsByClassName en meer.
Hier is een voorbeeld van waar we een aantal navigatie-items selecteren en een klik-handler aan alle items tegelijk koppelen:
Zie de Pen Change Classes on Stuff door Chris Coyier (@chriscoyier) op CodePen.
Als het JavaScript dat we in ons kleine voorbeeld hebben geschreven om welke reden dan ook niet kan worden geladen, hebben we nog steeds een knop met de tekst "Klik op mij". Maar erop klikken zou niet veel doen, toch? Misschien kunnen we die knop met JavaScript invoegen, zodat de knop er niet eens is, tenzij we weten dat hij zal werken? Goed idee, hè?