# Стилизация с помощью 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`, явно указывающее на желаемый нами цвет.

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

← →
↑
en ru