Pobieranie chmurki

Lekcja 7 z 18 w kursie Poruszające się chmury — projekt HTML/CSS/JS w Coddy.

Przypomnijmy krótko, jak manipulować elementami DOM za pomocą JS.

Aby pobrać elementy według nazwy klasy, użyj document.getElementsByClassName:

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

Powyższy kod pobierze tablicę wszystkich elementów w dokumencie o nazwie klasy "someName".

Aby zmodyfikować styl elementu, użyj właściwości style:

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

Powyższy kod ustawi kolor tła pierwszego elementu o nazwie klasy "someName" na "red".

Uwaga: jeśli elements jest pustą tablicą, program zakończy się błędem.

Wyzwanie

Łatwy

W pliku JS:

Pobierz elementy o nazwie klasy "cloud"
Pobierz pierwszy element z tych elementów (naszą jedyną chmurę) i ustaw:
1. styl top na wartość większą niż "0px"
2. styl left na wartość większą niż "0px"

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
        <script src="script.js"></script>
    </body>
</html>