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

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

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

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

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

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

css.colored {
  color: green;
}

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

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

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

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