JavaScript с нуля - [59]

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

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

Два подхода стилизации

Из начала главы мы знаем, что есть два способа изменять стиль элемента с помощью JavaScript. Первый — это установка свойства CSS непосредственно в элементе. Второй — добавление или удаление значений класса из элемента, что может приводить к применению или игнорированию определенных правил стиля. Рассмотрим оба случая подробнее.

Установка стиля напрямую

Каждый HTML-элемент, к которому вы обращаетесь через JavaScript, имеет объект style. Этот объект позволяет определять свойство CSS и устанавливать его значение. Например, вот как будет выглядеть установка фонового цвета HTML-элемента со значением id — superman:

let myElement = document.querySelector("#superman");

myElement.style.backgroundColor = "#D93600";

Чтобы воздействовать на несколько элементов, вы можете сделать следующее:

let myElements = document.querySelectorAll(".bar");

for (let i = 0; i < myElements.length; i++) {

myElements[i].style.opacity = 0;

}

Коротко говоря, для прямой стилизации элементов с помощью JavaScript первым шагом будет обращение к элементу. При этом будет очень удобно использовать знакомый нам метод querySelector. Вторым шагом будет нахождение интересующего вас свойства CSS и указание для него значения. Помните, что многие значения в CSS являются строками. Также помните, что многим значениям для распознания требуются единицы измерения вроде px, em или аналогичные.

И последнее. Некоторые свойства CSS требуют, чтобы более сложные значения предоставлялись в виде текста, сопровождаемого значением, которое нужно вам самим. Одно из наиболее популярных свойств в этом списке — это свойство преобразования. В качестве подхода для установки сложного значения можно использовать старую добрую конкатенацию:

myElement.style.transform = "translate3d(" + xPos +", " + yPos + "px, 0)";

Но такой вариант быстро надоест, поскольку отслеживание расстановки кавычек и прочие действия весьма утомительны и могут вызвать множество ошибок. Другое решение уже не так сложно и подразумевает использование синтаксиса шаблонного литерала:

myElement.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;

Обратите внимание, что этот подход позволяет вам по-прежнему применять пользовательские значения, избегая при этом всей сложности конкатенации строк.

Вынужденное изменение имен некоторых свойств CSS

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

Чтобы указать в JavaScript свойство CSS, содержащее тире, просто удалите это тире. Например, background-color станет backgroundColor, а border-radius будет borderRadius и т. д.

Кроме того, некоторые слова в JavaScript зарезервированы и не могут быть использованы как есть. Один из примеров свойств CSS, подпадающих под эту категорию, является float. В CSS это свойство макета. В JavaScript же оно обозначает нечто иное. Чтобы использовать свойство, чье имя зарезервировано, используйте для него префикс css, то есть напишите не float, а cssfloat.

Добавление и удаление классов с помощью JavaScript

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

disableMenu

{ display: none;

}

В HTML у нас есть меню, чей id — dropDown:

• One
• Two
• Three
• Four
• Five
• Six

Теперь если мы захотим применить стиль. disableMenu к этому элементу, то нам всего лишь понадобится добавить disableMenu в качестве значения class к элементу dropDown:

• One
• Two
• Three
• Four
• Five
• Six

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