Stilizimi me përdorimin e klasave CSS në JavaScript

Në mësimin e mëparshëm mësuam të ndryshonim stilet CSS të elementeve përmes ndryshimit të atributit style. Shpesh kjo nuk është një ide shumë e mirë. Çështja është se, nëse i shpërndajmë stilet CSS nëpër kod JavaScript, në të ardhmen do të jetë problematike të ndryshosh dizajnin e faqes, pasi do të duhet të gërmosh në kod JavaScript duke kërkuar për stilet e ngulitura aty.

Më e përshtatshme për mirëmbajtjen e mëtejshme do të ishte të shtosh ose të heqësh nga elementi klasat CSS, duke i stilizuar kështu në mënyrën e dëshiruar.

Le të shohim një shembull. Le të themi se kemi disa paragrafë:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Le të bëjmë që me klikim në cilindo paragraf, ai paragraf të ngjyrohet në një ngjyrë të caktuar, për shembull, të gjelbër. Për këtë, në skedarin CSS të krijojmë një klasë të veçantë për ngjyrëzimin e paragrafëve:

.colored {
	color: green;
}

Përparësia e përdorimit të klasës është se tani lehtë mund të ndryshosh ngjyrën e dëshiruar - për këtë do të duhet thjesht të bësh një ndryshim në skedarin CSS, pa prekur kodin JavaScript. Kjo është veçanërisht e përshtatshme në rastin kur kodin JavaScript e shkruani ju, dhe në të ardhmen stilizimin do ta bëjë dikush tjetër (ndoshta një person më pak i kualifikuar, i cili di të punojë vetëm me CSS).

Pra, tani, pas prezantimit të klasës, me klikim në cilindo paragraf mund të ndryshohet ngjyra e tij, thjesht duke i shtuar atij klasën tonë:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // shtojmë klasën tek paragrafi
	});
}

Shpjegoni, pse unë zgjodha për emrin e klasës fjalën colored, dhe jo fjalën green, e cila tregon qartë ngjyrën e dëshiruar nga ne.

Jepet një paragraf. Janë dhënë butonat 'tejkalo', 'bëj të trashë', 'bëj të kuq'. Le të jetë që me shtypje në çdo buton veprimi i caktuar të ndodhë me paragrafin (të bëhet i kuq, për shembull).