JavaScript с нуля - [58]

В этом фрагменте кода стоит обратить внимание на то, что мы получаем значение атрибута id в элементе h1. Если мы укажем имя несуществующего атрибута, то получим значение null. В противоположность получению значения существует его установка. Чтобы установить значение, мы используем соответственно названный метод setAttribute. Делается это вызовом setAttribute для элемента, на который нужно воздействовать, и указанием как имени атрибута, так и значения, которое он должен в итоге хранить.

Вот пример использования setAttribute:

What's happening?

Мы устанавливаем (на самом деле перезаписываем) атрибут class в элементе h1 на bar foo. Функция setAttribute не производит никакой проверки, чтобы убедиться, что мы устанавливаем в элемент допустимый для него атрибут. Поэтому ничто не мешает нам сделать какую-нибудь глупость вроде этой:

What's happening?

Элемент h1 не содержит атрибут src, но мы можем его указать. Когда код будет запущен, элемент h1 даже примерит на себя этот атрибут src, но ему наверняка будет неудобно.

Прежде чем мы продолжим, хочу кое-что прояснить. В этих примерах использования setAttribute и getAttribute я выбрал id и class. Для этих двух атрибутов у нас есть и другой способ установки. В связи с тем что процесс установки атрибутов id и class очень распространен, наши HTML-элементы открыто выражают свойства id и className:

What's happening?

Возвращаясь к нашему примеру, обратите внимание, что я переключился с использования getAttribute и setAttribute на использование id и className. Конечный результат полностью одинаков. Единственное отличие в том, что у вас появился прямой путь установки этих атрибутов без необходимости использования getAttribute или setAttribute. Теперь, прежде чем продолжить, я должен прояснить одну особенность: мы не можем использовать class в JavaScript для обращения к атрибуту класса, так как class имеет совершенно другое назначение, имеющее отношение к работе с объектами. Поэтому мы используем className.

СОВЕТ

Есть существенно лучший способ указания значений класса, чем использование className. Этот способ реализуется через куда более интересное свойство classList, о котором вы подробно узнаете в следующей главе.

КОРОТКО О ГЛАВНОМ

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

Основные выводы из текущей темы в том, что производимые вами изменения DOM практически всегда будут принимать одну из двух форм:

• установка свойства;

• вызов метода.

Методы textContent, setAttribute и getAttribute, рассмотренные нами, покрывают оба этих подхода, и вскоре вы часто будете встречать не только их самих, но и их друзей.

Это весьма увесистая тема! Если у вас есть вопросы, не откладывайте и скорее обращайтесь на форум https://forum.kirupa.com.

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

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

batman {

width: 100px;

height: 100px;

background-color: #333;

}

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

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

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

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

Поехали!

Зачем устанавливать стили с помощью JavaScript?

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