Получаем облако
Урок 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является пустым массивом, программа завершится с ошибкой.
Задание
ЛегкоВ JS-файле:
- Получите элементы с именем класса
"cloud" - Получите первый элемент из списка элементов (наше единственное облако) и установите:
- стиль
topв значение больше, чем"0px" - стиль
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
1Введение
Введение