Thứ Năm, 23 tháng 1, 2014
JavaScript HTML DOM - Thay đổi CSS
HTML DOM cho phép JavaScript để thay đổi phong cách của các phần tử HTML.
Thay đổi phong cách HTML
Để thay đổi phong cách của một phần tử HTML, sử dụng cú pháp sau:
document.getElementById(id).style.property=new style
Ví dụ sau đây thay đổi phong cách của một <p>:
Ví dụ
<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>
<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>
Thử nó cho mình »
Sử dụng sự kiện
DOM HTML 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 các trình duyệt khi "sự việc xảy ra" để các phần tử HTML:
- Một phần tử được nhấp vào
- Trang đã được nạp
- Lĩnh vực đầu vào được thay đổi
Bạn sẽ tìm hiểu thêm về các sự kiện trong chương kế tiếp của hướng dẫn này.
Ví dụ này thay đổi phong cách của các phần tử HTML với id = "id1", khi người dùng nhấn một 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>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét