Mõnikord peate õppima midagi tohutut ja keerukat õppima õppimiseks midagi väikest ja lihtsat. JavaScripti on tohutult ja keeruline, kuid väikeste ja lihtsate asjade õppimisega saate sellesse astuda. Kui olete veebidisainer, arvan, et on üks asi, mida saate õppida, mis on äärmiselt jõuline.
See on asi, mida ma tahan, et te õpiksite: kui klõpsate mõnel elemendil, muutke mõne elemendi klassi.
Kujutades seda absoluutse oluliseni, kujutage ette, et meil on nupp ja div:
Click Me I'm an element Divil võib olla mõni põhistiil ja sellel võib olla ka mõni stiil, kui tal on kindel klass:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Nutikad CSS-trikimehed võivad seda tunnistada kui võimalust märkeruutude häkkimiseks, kuid sellega me täna ei tegele.
Tahame nupule lisada „sündmuste kuulaja”: natuke koodi, et “kuulata”, meie juhul klõpsake sündmusi ja kui see juhtub, käivitage rohkem koodi.
Teate, kuidas CSS-is peame elemendid nende stiiliks valima? Peame seda tegema ka JavaScripti abil, et lisada meie sündmuste kuulaja. Loome muutujale nupule viite:
var button = document.querySelector("button");Nüüd, kui meil on viide nupule, lisame selle sündmuse kuulaja:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Ja mida me tahame teha klõpsu korral? Lisage meie divisse klassi nimi! Kuid nagu me vajasime nupu jaoks viiteid, et sellega asju teha, vajame ka div-i viiteid. Teeme need mõlemad korraga, siin on kogu koodibitt:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));See on kogu asi, mida ma teile näidata tahtsin. Kui sellesse “yay” klassi on lisatud mõned CSS-id, võime div-i sisse ja välja tuhmida:
Vaadake CodePenis Chris Coyieri (@chriscoyier) pliiatsi klõpsamise midagi / klassi muutmist.
Miks see üks asi?
Kujundusvõimalused on lõputud, kui kontrollite CSS-i ja mis tahes elemendi olekut (millised klassi nimed sellel on). Asjade varjamine ja paljastamine on ilmne jõud, kuid see võib tõesti olla ükskõik milline.
Tasandamine üles
Pidage meeles, et te ei piirdu ainult ühe klassi nime muutmisega. Saate muuta ühe elemendi mitu klassi või muuta mitme elemendi klasse.
Vaadake täpsemalt atribuuti classList. „Lülitamine” pole ainus võimalus.
Nii nagu HTML ja CSS, on JavaScripti jaoks brauseri tugi erineval tasemel. Vaadake klassi brauseri brauseri tuge ja lisage addEventListener. Kas olete oma projekti toetuse tasemega kõik korras? Kui ei, siis võiksite uurida polüfille või isegi jQuery.
Kasutasime „kliki“ sündmust, kuid teisi on veel palju. Muud hiire sündmused, kerimine, klaviatuur ja palju muud. Mitusada.
Meetod, mida valisime, oli document.querySelector. See oli kasulik, kuna see tagastab meile ühe elemendi, millega töötada. Lisaks on selektorid, mille talle annate, täpselt nagu CSS-i valijad. document.querySelector("#overlay .modal > h2");oleks legitiimne valik. See pole siiski ainus meetod valimiseks, on ka teisi, näiteks getElementById, querySelectorAll, getElementsByClassName ja palju muud.
Siin on näide sellest, kus valime hulga navigeerimisüksusi ja kinnitame neile kõigile korraga klõpsude käitleja:
Vaadake Code Cenil Chris Coyieri (@chriscoyier) pliiatsi vahetamise klasside sisu.
Kui meie väikeses näites kirjutatud JavaScripti ei õnnestunud mingil põhjusel laadida, oleks meil ikkagi nupp „Click Me”. Kuid selle klõpsamine ei teeks paganama palju? Võib-olla võiksime selle nupu lisada JavaScripti abil, nii et nuppu pole isegi seal, kui me ei tea, et see töötab? Hea idee? ;)