Die Wolke holen

Lektion 7 von 18 im Kurs Ziehende Wolken – HTML/CSS/JS-Projekt von Coddy.

Hier ist eine kurze Erinnerung daran, wie man DOM-Elemente mit JS manipuliert.

Um Elemente nach Klassennamen abzurufen, verwenden Sie document.getElementsByClassName:

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

Der obige Code liefert ein Array aller Elemente im Dokument mit dem Klassennamen "someName" zurück.

Um den Stil eines Elements zu ändern, verwenden Sie die Eigenschaft style:

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

Der obige Code setzt die Hintergrundfarbe des ersten Elements mit dem Klassennamen "someName" auf "red".

Hinweis: Wenn elements ein leeres Array ist, wird das Programm fehlschlagen.

Aufgabe

Einfach

In der JS-Datei:

Holen Sie sich die Elemente mit dem Klassennamen "cloud"
Holen Sie sich das erste Element aus den Elementen (unsere einzige Wolke) und setzen Sie:
1. den top-Stil auf einen Wert größer als "0px"
2. den left-Stil auf einen Wert größer als "0px"

Probier es selbst

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