Bulutu Almak

Coddy'nin Hareketli Bulutlar - HTML/CSS/JS Projesi kursunda ders 7 / 18.

JS kullanarak DOM öğelerinin nasıl manipüle edileceğine dair kısa bir hatırlatma yapalım.

Öğeleri sınıf adına göre almak için document.getElementsByClassName kullanın:

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

Yukarıdaki kod, belgedeki sınıf adı "someName" olan tüm öğelerden oluşan bir dizi döndürecektir.

Bir öğenin stilini değiştirmek için style özelliğini kullanın:

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

Yukarıdaki kod, sınıf adı "someName" olan ilk öğenin arka plan rengini "red" olarak ayarlayacaktır.

Not: Eğer elements boş bir diziyse, program hata verecektir.

Görev

Kolay

JS dosyasında:

"cloud" sınıf adına sahip öğeleri alın
Öğeler içindeki ilk öğeyi (tek bulutumuz) alın ve şunları ayarlayın:
1. top stilini "0px" değerinden büyük bir değere
2. left stilini "0px" değerinden büyük bir değere

Kendin dene

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