Menu
Coddy logo textTech

Получаем облако

Урок 7 из 18 курса Движущиеся облака — проект на HTML/CSS/JS на Coddy.

Давайте вкратце вспомним, как манипулировать элементами DOM с помощью JS.

Чтобы получить элементы по имени класса, используйте document.getElementsByClassName:

const elements = document.getElementsByClassName("someName");

Приведенный выше код получит массив всех элементов в документе с именем класса "someName".

Чтобы изменить стиль элемента, используйте свойство style:

const elements = document.getElementsByClassName("someName");
const element = elements[0];
element.style.background = "red";

Приведенный выше код установит цвет фона первого элемента с именем класса "someName" на "red".

Примечание: если elements является пустым массивом, программа завершится с ошибкой.

challenge icon

Задание

Легко

В JS-файле:

  1. Получите элементы с именем класса "cloud"
  2. Получите первый элемент из списка элементов (наше единственное облако) и установите:
    1. стиль top в значение больше, чем "0px"
    2. стиль left в значение больше, чем "0px"

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Все уроки раздела Движущиеся облака — проект на HTML/CSS/JS