JavaScript HTML DOM - Thay đổi CSS
HTML DOM cho phép JavaScript thay đổi kiểu của các phần tử HTML.
Thay đổi kiểu HTML
Để thay đổi kiểu của một 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 một <p>
phần tử:
Thí dụ
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Sử dụng sự kiện
HTML DOM cho phép bạn thực thi mã khi một sự kiện xảy ra.
Các sự kiện được tạo bởi trình duyệt khi "mọi thứ 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 id="id1"
khi người dùng nhấp vào nút:
Thí 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>
Các ví dụ khác
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 DOM HTML
Đối với tất cả các thuộc tính kiểu DOM HTML, hãy xem Tham chiếu đối tượng kiểu DOM HTML hoàn chỉnh của chúng tôi .