JavaScript с нуля

Глава 27. Cтиль контента

В предыдущей главе мы рассмотрели, как можно модифицировать содержимое DOM, используя JavaScript. Однако HTML-элементы также отличаются и внешностью, а именно стилем. Когда дело доходит до стилизации содержимого, наиболее распространены создание правила стиля и нацеливание его селектора на элемент(ы). Выглядит правило стиля так:

batman {

width: 100px;

height: 100px;

background-color: #333;

}

Сам же элемент, на который будет действовать это правило, может выглядеть так:

<div class="batman"></div>

На любой веб-странице мы повсюду встречаем от нескольких до многих правил стиля, красиво перемежающиеся друг с другом, стилизуя все, что мы видим. Тем не менее это не единственный подход, который можно использовать для стилизации содержимого с помощью CSS. Это бы не был HTML, если бы в нем ни присутствовало несколько способов решения одной задачи.

Без учета встроенных стилей другой подход для CSS-стилизации элементов заключается в использовании JavaScript. Мы можем использовать JS, чтобы устанавливать стиль элемента напрямую, а также чтобы добавлять или удалять значения класса элементов, которые будут определять применение тех или иных правил стиля.

В этой главе мы изучим оба этих подхода.

Поехали!