Tạo đám mây

Bài học 7 trên 18 trong khóa học Dự án mây chuyển động với HTML/CSS/JS của Coddy.

Hãy cùng ôn lại nhanh cách thao tác với các phần tử DOM bằng JS.

Để lấy các phần tử theo tên lớp, hãy dùng document.getElementsByClassName:

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

Câu lệnh trên sẽ lấy một mảng gồm tất cả phần tử trong tài liệu có tên lớp là "someName".

Để thay đổi kiểu của một phần tử, hãy dùng thuộc tính style:

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

Câu lệnh trên sẽ đặt màu nền của phần tử đầu tiên có tên lớp là "someName" thành "red".

Lưu ý: nếu elements là một mảng rỗng, chương trình sẽ gặp lỗi.

Thử thách

Dễ

Trong tệp JS:

Lấy các phần tử có tên lớp "cloud"
Lấy phần tử đầu tiên trong số các phần tử (đám mây duy nhất của chúng ta) và đặt:
1. kiểu top thành giá trị lớn hơn "0px"
2. kiểu left thành giá trị lớn hơn "0px"

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML ở đây -->
        <script src="script.js"></script>
    </body>
</html>