Chỉnh sửa kiểu dáng phần tử

Bài học 4 trên 13 trong khóa học Các phương thức DOM trong JavaScript của Coddy.

Thuộc tính tiếp theo chúng ta sẽ tìm hiểu là style, thuộc tính này dùng để thay đổi kiểu dáng hiện có. Bạn có thể chỉnh sửa kiểu dáng như sau:

const element = document.getElementById("elementID");
element.style.color = "green";

Sau đoạn code này, màu của #elementID sẽ đổi thành green.

Thử thách

Dễ

Bạn được cung cấp code HTML có chứa div với một ID.

Chỉ sử dụng JavaScript, hãy đổi màu nền của div này thành màu đỏ:

Lấy phần tử bằng hàm getElementById.
Thay đổi thuộc tính màu nền trong kiểu của phần tử bằng thuộc tính style.backgroundColor.

Tự làm thử

<!DOCTYPE html>
<html>
    <body>
        <div id="box" style="width: 100px; height: 100px;">Content</div>
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Các phương thức DOM trong JavaScript

1Giới thiệu

Giới thiệu Mô hình đối tượng tài liệu

2Phương thức DOM I

getElementByIdChỉnh sửa kiểu dáng phần tửgetElementsByClassName Duyệt qua và thao tác getElementsByTagName querySelector

3Các phương thức DOM II

querySelectorAll addEventListener innerHTML createElement và appendChild Chuyển đổi classList

Tự luyện tập: Playground Web