Стилизација со користење на CSS класи во JavaScript

Во претходната лекција научивме како да ги менуваме CSS стиловите на елементите преку промена на атрибутот style. Најчесто ова не е многу добра идеја. Бидејќи, ако ги рашириме CSS стиловите низ JavaScript кодот, подоцна ќе биде проблематично да се промени дизајнот на веб-страницата, бидејќи ќе треба да се рови во JavaScript кодот во потрага по стиловите вградени во него.

Попогодно за подоцнежна поддршка би било да се додаваат или отстрануваат CSS класи на елементот, со што тие се стилизираат на потребниот начин.

Ајде да погледнеме на пример. Нека имаме неколку параграфи:

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

Ајде да направиме така што при клик на кој било параграф, тој параграф да се обојува во некоја боја, на пример, зелена. За ова во CSS датотеката ќе направиме посебна класа за обојување на параграфи:

.colored {
	color: green;
}

Предноста на користењето на класата е што сега лесно може да се промени саканата боја - за ова ќе треба едноставно да се внесе промена во CSS датотеката, без да се рови во JavaScript кодот. Особено погодно ова ќе биде во случај кога JavaScript кодот го пишувате вие, а подоцна некој друг да го стилизира (можеби помалку квалификувана личност, која знае да работи само со CSS).

Значи, сега, по воведот на класата, при клик на кој било параграф може да се смени неговата боја, едноставно со додавање на нашата класа на него:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // го додаваме класаот на параграфот
	});
}

Објаснете, зошто ја избрав за името на класата зборот colored, а не зборот green, кој експлицитно укажува на саканата од нас боја.

Даден е параграф. Дадени се копчињата 'прецртај', 'направи задебелен', 'направи црвен'. Нека при притискање на секое копче зададеното дејство да се случи со параграфот (да стане црвен, на пример).