JavaScript HTML DOM - Thay đổi CSS

HTML DOM 允许 JavaScript 更改 HTML 元素的样式。

改变 HTML 样式

如需更改 HTML 元素的样式，请使用此语法：

document.getElementById(id).style.property = new style

下面的例子更改了 <p> 元素的样式：

Example

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>Phần đoạn trên đã bị script thay đổi.</p>
</body>
</html>

Thử ngay

Sử dụng sự kiện

HTML DOM cho phép bạn thực hiện mã khi sự kiện xảy ra.

Khi “certain things” xảy ra trên phần tử HTML, trình duyệt sẽ tạo ra sự kiện:

  • Khi nhấn vào một phần tử
  • Khi trang được tải
  • Khi trường nhập được thay đổi

Bạn sẽ học thêm về sự kiện trong chương tiếp theo của hướng dẫn này.

Ví dụ này sẽ thay đổi phong cách của phần tử HTML có id="id1" khi người dùng nhấn nút:

Example

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Tiêu đề 1 của tôi</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Nhấn tôi!
</button>
</body>
</html>

Thử ngay

More examples

Visibility
Làm thế nào để làm cho phần tử không nhìn thấy được. Bạn có muốn hiển thị phần tử không?

Tài liệu tham khảo đối tượng Style của HTML DOM

Nếu bạn cần tất cả các thuộc tính kiểu của HTML DOM, hãy truy cập trang của chúng tôi Tài liệu tham khảo đối tượng Style của HTML DOM.