DOM HTML JavaScript - Thay đổi CSS
HTML DOM cho phép JavaScript thay đổi kiểu dáng của các phần tử HTML.
Thay đổi kiểu HTML
Để thay đổi kiểu của phần tử HTML, hãy sử dụng cú pháp sau:
document.getElementById( id ).style. property = new style
Ví dụ sau thay đổi kiểu của phần tử <p>
:
Ví dụ
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Hãy tự mình thử »Sử dụng sự kiện
HTML DOM cho phép bạn thực thi mã khi có sự kiện xảy ra.
Các sự kiện được trình duyệt tạo ra khi "sự việc xảy ra" với các phần tử HTML:
- Một phần tử được nhấp vào
- Trang đã được tải
- Các trường đầu vào được thay đổi
Bạn sẽ tìm hiểu thêm về các sự kiện trong chương tiếp theo của hướng dẫn này.
Ví dụ này thay đổi kiểu của phần tử HTML bằng id="id1"
, khi người dùng nhấp vào nút:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>
Hãy tự mình thử » Thêm ví dụ
Khả năng hiển thị Cách làm cho một phần tử trở nên vô hình. Bạn có muốn hiển thị phần tử hay không?
Tham chiếu đối tượng kiểu HTML DOM
Đối với tất cả các thuộc tính kiểu HTML DOM, hãy xem Tài liệu tham khảo đối tượng kiểu DOM HTML hoàn chỉnh của chúng tôi.