Récupérer le nuage

Leçon 7 sur 18 du cours Nuages en mouvement - Projet HTML/CSS/JS de Coddy.

Faisons un bref rappel sur la façon de manipuler les éléments du DOM en utilisant JS.

Pour obtenir des éléments par nom de classe, utilisez document.getElementsByClassName :

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

Ce qui précède récupérera un tableau de tous les éléments du document ayant un nom de classe "someName".

Pour modifier le style d'un élément, utilisez la propriété style :

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

Ce qui précède définira la couleur d'arrière-plan du premier élément ayant un nom de classe "someName" sur "red".

Note : si elements est un tableau vide, le programme échouera.

Défi

Facile

Dans le fichier JS :

Récupérez les éléments ayant le nom de classe "cloud"
Récupérez le premier élément parmi les éléments (notre seul nuage) et définissez :
1. le style top à une valeur supérieure à "0px"
2. le style left à une valeur supérieure à "0px"

Essayez vous-même

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