Изменение стилей

То, как выглядит страница (цвета, размеры, шрифты), описывает CSS. В правиле CSS есть селектор, который говорит, к каким элементам относится правило, а затем в фигурных скобках — как они должны выглядеть:

h1 {
    color: purple;
    background-color: yellow;
}

Это правило делает главный заголовок фиолетовым на жёлтом фоне. color и background-color — свойства CSS, purple и yellow — их значения. CSS страницы можно записать в элементе style в head; в index.html этого упражнения он есть.

JavaScript может менять внешний вид элемента через его свойство style:

const heading = document.querySelector("h1");
heading.style.color = "purple";
heading.style.fontSize = "48px";

Значения — это текст в кавычках, записанный так же, как в CSS. Названия свойств CSS с дефисом в JavaScript пишутся в camelCase: background-color превращается в backgroundColor, font-size — в fontSize. Дело в том, что дефис в JavaScript — это минус: JavaScript прочитал бы heading.style.background-color = "yellow"; как вычитание heading.style.background - color, а присвоить значение вычитанию нельзя. Ни одна строка скрипта не выполнилась бы, а в консоли появилось бы SyntaxError: Invalid left-hand side in assignment.

Задавать стили по одному — долго. Чаще внешний вид готовят в CSS страницы в виде класса, а JavaScript только добавляет класс элементу или убирает его. Например, на странице в этом упражнении есть список (ul, с элементом li для каждого пункта) и такое правило CSS для элементов с классом done:

.done {
    color: gray;
    text-decoration: line-through;
}

У каждого элемента есть свойство classList с такими методами:

• classList.add("done") добавляет элементу класс done,
• classList.remove("done") убирает его,
• classList.toggle("done") добавляет класс, если его нет у элемента, и убирает, если он есть. Это удобно для кнопок, как вы увидите в следующем упражнении.

Имя класса пишите без точки: add("done"), а не add(".done"). Точка нужна только в селекторах. С ней вы добавили бы класс с именем .done, которому не соответствует ни одно правило CSS, и ничего бы не изменилось.