JavaScript с нуля

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

Каждый 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.