Thứ Năm, 23 tháng 1, 2014
JavaScript HTML DOM - Thay đổi HTML
HTML DOM cho phép JavaScript để thay đổi nội dung của các phần tử HTML.
Thay đổi Stream HTML đầu ra
JavaScript có thể tạo ra nội dung HTML động:
Ngày: Thu 24 tháng 1 2014 11:11:30 GMT 0700 (SE Giờ chuẩn Châu Á)
Trong JavaScript, document.write () có thể được sử dụng để viết trực tiếp đến dòng đầu ra HTML:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Thử nó cho mình »
 | Không bao giờ sử dụng document.write () sau khi tài liệu được tải. Nó sẽ ghi đè lên các tài liệu. |
|---|
Thay đổi nội dung HTML
Cách dễ nhất để sửa đổi nội dung của một phần tử HTML là sử dụng innerHTML tài sản.
Thay đổi nội dung của một phần tử HTML, sử dụng cú pháp sau:
document.getElementById(id).innerHTML=new HTML
Ví dụ này thay đổi nội dung của một phần tử <p>:
Ví dụ
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Thử nó cho mình »
Ví dụ này thay đổi nội dung của một phần tử <h1>:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>
Thử nó cho mình »
Ví dụ giải thích:
- Các tài liệu HTML trên có chứa một yếu tố <h1> với id = "tiêu đề"
- Chúng tôi sử dụng HTML DOM để có được các phần tử với id = "tiêu đề"
- Một JavaScript thay đổi nội dung (innerHTML) của phần tử đó
Thay đổi giá trị của một thuộc tính
Thay đổi giá trị của một thuộc tính HTML, sử dụng cú pháp sau:
document.getElementById(id).attribute=new value
Ví dụ này thay đổi giá trị của thuộc tính src của một phần tử <img>:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
Thử nó cho mình »
Ví dụ giải thích:
- Các tài liệu HTML trên có chứa một yếu tố <img> với id = "hình ảnh"
- Chúng tôi sử dụng HTML DOM để có được các phần tử với id = "hình ảnh"
- Một JavaScript thay đổi thuộc tính src của phần tử đó từ "smiley.gif" để "landscape.jpg"
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét