HTML DOM trong JavaScript - Thay đổi CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

HTML DOM trong JavaScript – Thay đổi CSS

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

HTML DOM cho phép JavaScript để thay đổi định dạng của các phần tử HTML.

Thay đổi định dạng 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 định dạng của một phần tử <p>:

<html>
<body>

<p id=”p2″>Hello World!</p>

<script>
document.getElementById(“p2”).style.color = “blue”;
</script>

<p>The paragraph above was changed by a script.</p>

</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. Sự kiện được tạo ra 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 đã tải
  • Các trường nhập được thay đổi

Ví dụ này thay đổi phong cách của phần tử HTML với id = “id1”, khi người dùng nhấp vào một nút:

<!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>