Ibland måste du lära dig något litet och enkelt för att starta en resa för att lära dig något enormt och komplext. JavaScript är enormt och komplext, men du kan gå in i det genom att lära dig små och enkla saker. Om du är webbdesigner tror jag att det är särskilt en sak du kan lära dig som är extremt bemyndigande.
Det här är det jag vill att du ska lära dig: När du klickar på något element byter du klass på något element.
Tänk på att vi har en knapp och en div:
Click Me I'm an element Div kan ha vissa basstilar och det kan ha vissa stilar när det har en viss klass:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Skarpa CSS-tricksters kanske känner igen detta som en möjlighet för kryssrutan hacka, men det är inte vad vi jobbar med idag.
Vi vill bifoga en "eventlyssnare" till knappen: lite kod att "lyssna" för, i vårt fall, klickhändelser, och när det händer, kör mer kod.
Du vet hur vi i CSS måste ”välja” element för att utforma dem? Vi måste göra det också i JavaScript för att bifoga vår eventlyssnare. Vi skapar en ”referens” till knappen, som en variabel, så här:
var button = document.querySelector("button");Nu när vi har en hänvisning till knappen, bifogar vi den händelserlyssnaren:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Och vad vill vi göra i händelse av ett klick? Lägg till ett klassnamn i vår div! Men precis som vi behövde en referens för knappen för att kunna göra saker med den, behöver vi också en referens för div. Låt oss göra dem båda samtidigt, här är hela koden:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Det är det hela jag ville visa dig. Med vissa CSS läggs till den "yay" -klassen kan vi blekna in och ut div:
Se Pen Click Clickething / Change Class av Chris Coyier (@chriscoyier) på CodePen.
Varför den här saken?
Designmöjligheterna är oändliga när du styr CSS och tillståndet för något element (vilka klassnamn det har). Att gömma och avslöja saker är den uppenbara kraften, men det kan verkligen vara vad som helst.
Nivå upp
Kom ihåg att du inte är begränsad till att ändra ett klassnamn. Du kan ändra flera klasser på ett enda element eller ändra klasserna på flera element.
Titta mer på egenskapen classList. "Växla" är inte det enda alternativet.
Precis som HTML och CSS har JavaScript olika nivåer av webbläsarstöd för saker. Titta i webbläsarens stöd för classList och lägg till addEventListener. Är du okej med dessa nivåer av stöd för ditt projekt? Om inte, kan du titta på polyfills eller till och med jQuery.
Vi använde "klick" -händelsen, men det finns många andra. Andra mushändelser, rullning, tangentbord och mer. Många hundra.
Metoden vi använde för att välja var document.querySelector. Detta var användbart eftersom det returnerar ett enda element som vi kan arbeta med. Dessutom är väljarna du ger den precis som CSS-väljare. document.querySelector("#overlay .modal > h2");skulle vara ett legitimt val. Det här är dock inte den enda metoden för att välja, det finns andra som getElementById, querySelectorAll, getElementsByClassName och mer.
Här är ett exempel på var vi väljer en massa navigeringsobjekt och bifogar en klickhanterare till dem alla på en gång:
Se Pen Change Classes on Stuff av Chris Coyier (@chriscoyier) på CodePen.
Om JavaScript som vi skrev i vårt lilla exempel inte kunde laddas av någon anledning, skulle vi fortfarande ha en knapp som säger ”Klicka på mig”. Men att klicka på det skulle inte göra en hel del, eller hur? Kanske skulle vi kunna infoga den knappen med JavaScript så att knappen inte ens finns där om vi inte vet att den kommer att fungera? Bra idé, va? ;)