Стылізацыя з дапамогай 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, яўна якое ўказвае на жаданы намі колер.

Дадзены абзац. Дадзены кнопкі 'перакрэсліць', 'зрабіць тлустым', 'зрабіць чырвоным'. Хай па націску на кожную кнопку зададзенае дзеянне адбываецца з абзацам (становіцца чырвоным, напрыклад).