Стилизација помоћу CSS класа на ЈаваСкрипту

У претходној лекцији научили смо да мењамо CSS стилове елемената кроз измену атрибута style. То најчешће није баш добра идеја. Разлог је у томе што, ако раширимо CSS стилове по ЈаваСкрипт коду, касније ће бити проблематично изменити дизајн сајта, јер ћемо морати да копамо по ЈаваСкрипт коду тражећи у њему уграђене стилове.

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

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

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

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

.colored {
	color: green;
}

Предност коришћења класе је у томе, што сада лако можемо да изменимо жељену боју - за то ће једноставно требати да унесемо измену у CSS фајл, без копања по ЈаваСкрипт коду. Посебно је згодно то у случају када ЈаваСкрипт код пишете ви, а касније ће га неко други стилизовати (можда мање квалификована особа, која уме да ради само са CSS-ом).

Дакле, сада, након увођења класе, при клику на било који пасус можемо да изменимо његову боју, једноставно додајући му нашу класу:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // додајемо пасусу класу
	});
}

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

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