Мяу! Я придумал новый формат: статья — длинная, настройки — гибкие. Помоги всё запрограммировать, пока конкуренты не пронюхали!

На новостном портале из стартового тренажёра и прошлых частей теперь публикуют не только короткие новости, но и длинные статьи. Чтобы их было удобно читать, у пользователей должна быть возможность менять размер и цвет текста, а также цвет фона в этих статьях.

Работать мы будем со страницей отдельной статьи. В верхней части страницы находятся настройки: два выпадающих списка с цветами и ползунок. Выпадающие списки отвечают за цвет текста и фон статьи. Ползунок управляет размером текста. Когда пользователь выбирает новое значение из списка или сдвигает ползунок, оформление статьи должно меняться.

Раньше, чтобы изменить внешний вид элемента, мы использовали классы. Но для этой задачи такой подход не годится. Цветов в списках и положений у ползунка слишком много — чтобы учесть все варианты, пришлось бы создать 76 классов. Есть другое решение — изменять стили элемента напрямую.

Управлять стилями элемента можно с помощью свойства style. После него через точку указывают то CSS-свойство, которое нужно изменить.

элемент.style.свойствоCSS

Чтобы изменить стиль элемента, указанному свойству нужно присвоить новое значение. Например:

let element = document.querySelector('p');

// Зададим абзацу зелёный цвет текста
element.style.color = 'green';

Стили, заданные с помощью свойства style, работают так же, как если бы их указали в разметке в атрибуте style самого элемента. Они имеют больший приоритет, чем CSS-правила из файла со стилями.

Так когда использовать классы, а когда — свойство style? Используйте style только в тех случаях, когда с помощью классов задачу решать неудобно.

На новостном сайте мы будем изменять стили отдельной статьи. Это элемент с классом longread. Найдём его и запишем в переменную. Чтобы проверить, как работает свойство style, изменим цвет текста в статье на фиолетовый.