Стилизация с помощта на 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, която явно посочва желания от нас цвят.

Даден е абзац. Дадени са бутони 'зачеркни', 'направи удебелен', 'направи червен'. Нека при натискане на всеки бутон зададеното действие да се извърши върху абзаца (да стане червен, например).