Mendapatkan Awan

Pelajaran 7 dari 18 dalam kursus Awan Bergerak, Proyek HTML/CSS/JS di Coddy.

Mari kita mengingat kembali secara singkat cara memanipulasi elemen DOM menggunakan JS.

Untuk mendapatkan elemen berdasarkan nama class, gunakan document.getElementsByClassName:

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

Kode di atas akan mendapatkan sebuah array yang berisi semua elemen dalam dokumen dengan nama class "someName".

Untuk mengubah style suatu elemen, gunakan property style:

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

Kode di atas akan mengatur warna latar belakang elemen pertama dengan nama class "someName" menjadi "red".

Catatan: jika elements adalah array kosong, program akan gagal.

Tantangan

Mudah

Di file JS:

Ambil elemen dengan nama class "cloud"
Ambil elemen pertama dalam kumpulan elemen (satu-satunya awan kita), lalu atur:
1. style top ke nilai yang lebih besar dari "0px"
2. style left ke nilai yang lebih besar dari "0px"

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
        <script src="script.js"></script>
    </body>
</html>