Стылізацыя з дапамогай CSS класаў на JavaScript

У папярэднім ўроке мы з вамі навучыліся мяняць CSS стылі элементаў праз змяненне атрыбута style. Частэй за ўсё гэта не вельмі добрая ідэя. Справа ў тым, што, калі раскідаць CSS стылі па JavaScript кодзе, у далейшым будзе праблематычна змяніць дызайн сайта, так як прыйдзецца капацца ў JavaScript кодзе ў пошуках зашытых туды стыляў.

Больш зручна для далейшай падтрымкі будзе дабаўляць альбо здымаць з элемента CSS класы, тым самым стылізуючы іх патрэбным чынам.

Давайце паглядзім на прыкладзе. Хай у нас ёсць некалькі абзацаў:

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

Давайце зробім так, каб па кліку на любы абзац, гэты абзац фарбаваўся ў які-небудзь колер, напрыклад, у зялёны. Для гэтага ў CSS файле зробім спецыяльны клас для афарбоўкі абзацаў:

css.colored {
  color: green;
}

Перавага выкарыстання класа ў тым, што цяпер лёгка можна будзе памяняць жаданы колер - для гэтага трэба будзе проста ўнесці змяненне ў CSS файл, не капаючыся ў JavaScript кодзе. Асабліва зручна гэта будзе ў тым выпадку, калі JavaScript код пішаце вы, а ў далейшым стылізаваць яго будзе хтосьці іншы (магчыма менш кваліфікаваны чалавек, які ўмее працаваць толькі з CSS).

Такім чынам, цяпер, пасля ўвядзення класа, па кліку на любы абзац можна змяніць яго колер, проста дадаўшы яму наш клас:

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

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