Uneori, pentru a începe o călătorie spre învățarea a ceva uriaș și complex, trebuie să înveți ceva mic și simplu. JavaScript este imens și complex, dar poți păși în el învățând lucruri mici și simple. Dacă sunteți designer de web, cred că există un lucru în special pe care îl puteți învăța, care este extrem de împuternicitor.
Acesta este lucrul pe care vreau să-l învățați: Când faceți clic pe un element, schimbați o clasă pe un element.
Fierbând asta până la esențialul absolut, imaginați-vă că avem un buton și un div:
Click Me I'm an element Div poate avea unele stiluri de bază și poate avea unele stiluri atunci când are o anumită clasă:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Astute CSS-Tricksters ar putea recunoaște acest lucru ca o oportunitate pentru hack caseta de selectare, dar nu la asta lucrăm astăzi.
Vrem să atașăm un „ascultător de evenimente” la buton: un pic de cod de „ascultat” pentru, în cazul nostru, faceți clic pe evenimente și, atunci când se întâmplă acest lucru, rulați mai mult cod.
Știți cum în CSS trebuie să „selectăm” elemente pentru a le stiliza? Trebuie să facem acest lucru și în JavaScript pentru a atașa ascultătorul nostru de evenimente. Vom crea o „referință” la buton, ca variabilă, astfel:
var button = document.querySelector("button");Acum că avem o referință la buton, vom atașa acel ascultător de evenimente:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Și ce vrem să facem în cazul unui clic? Adăugați un nume de clasă la div! Dar la fel cum am avut nevoie de o referință pentru buton pentru a face lucrurile cu el, vom avea nevoie de o referință și pentru div. Să le facem pe amândouă în același timp, iată întregul cod:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Acesta este întregul lucru pe care am vrut să vi-l arăt. Cu unele CSS adăugate la acea clasă „yay”, putem estompa în și în afara div:
Vedeți Pen Click Something / Change Class de Chris Coyier (@chriscoyier) pe CodePen.
De ce acest lucru?
Posibilitățile de proiectare sunt nelimitate atunci când controlați CSS și starea oricărui element (ce nume de clasă are). Ascunderea și dezvăluirea lucrurilor este puterea evidentă, dar într-adevăr ar putea fi orice.
Nivelare sus
Amintiți-vă că nu sunteți limitat la schimbarea numelui unei clase. Puteți modifica mai multe clase pe un singur element sau puteți schimba clasele pe mai multe elemente.
Căutați mai mult în proprietatea classList. „Comutare” nu este singura opțiune.
La fel ca HTML și CSS, JavaScript are diferite niveluri de suport pentru browser pentru lucruri. Căutați în suportul browserului pentru classList și adăugați addEventListener. Sunteți de acord cu aceste niveluri de sprijin pentru proiectul dvs.? Dacă nu, ați putea căuta în polifenituri sau chiar jQuery.
Am folosit evenimentul „clic”, dar există multe altele. Alte evenimente ale mouse-ului, derulare, tastatură și multe altele. Multe sute.
Metoda pe care am folosit-o pentru selectare a fost document.querySelector. Acest lucru a fost util, deoarece ne returnează un singur element cu care să lucrăm. În plus, selectorii pe care i-i dați sunt exact ca selectorii CSS. document.querySelector("#overlay .modal > h2");ar fi o selecție legitimă. Aceasta nu este singura metodă de selectare, totuși, există altele precum getElementById, querySelectorAll, getElementsByClassName și multe altele.
Iată un exemplu în care selectăm o grămadă de articole de navigare și atașăm un handler de clicuri la toate simultan:
Vedeți Class Change Pen on Stuff de Chris Coyier (@chriscoyier) pe CodePen.
Dacă JavaScript-ul pe care l-am scris în micul nostru exemplu nu a reușit să se încarce din orice motiv, am avea totuși un buton care spune „Faceți clic pe mine”. Dar dacă faceți clic pe acesta nu ar fi foarte mult, nu-i așa? Poate am putea insera acel buton cu JavaScript, deci butonul nu este nici măcar acolo, dacă nu știm că va funcționa? Bună idee, nu? ;)