Stilizimi me Klasa në JavaScript
Të stilizosh elementet përmes atributit style
ndonjëherë është i përshtatshëm, por më së shpeshti - nuk është
ideja më e mirë. Problemi është se stilet
do të shpërndahen në të gjithë skedarin JavaScript
dhe do të jetë i vështirë t'i ndryshosh ato.
Është shumë më e përshtatshme t'i caktosh stilet në skedarët CSS
në mënyrë që të mund të ndryshohen lehtësisht,
pa u futur thellë në kodin JavaScript.
Le të themi për shembull se kemi një element, që shfaq një mesazh. Mesazhi mund të jetë "i mirë" dhe të shfaqet me ngjyrë të gjelbër dhe "i keq" dhe të shfaqet me ngjyrë të kuqe. Zgjidhja më e mirë në këtë rast do të ishte të krijoheshin për këtë klasat përkatëse CSS:
.success {
color: green;
}
.error {
color: red;
}
Tani kur shfaqet një mesazh "i mirë" ne do t'i japim elementit klasën "e mirë":
elem.textContent = 'good';
elem.classList.add('success');
Kurse kur shfaqet një mesazh "i keq" ne do t'i japim elementit klasën "e keqe":
elem.textContent = 'bad';
elem.classList.add('error');
Janë dhënë paragrafë me numra. Kaloni nëpër këta paragrafë me një cikël dhe paragrafët që përmbajnë numra çift, ngjyrosini me të kuqe, kurse ata që përmbajnë numra tek - me të gjelbër.
