JavaScript có thể thay đổi nội dung HTML
Một trong nhiều phương thức JavaScript HTML là getElementById().
Ví dụ bên dưới "tìm" một phần tử HTML (với id="demo") và thay đổi nội dung phần tử (innerHTML) thành "Xin chào JavaScript":
document.getElementById("demo").innerHTML = "Xin chào JavaScript";
JavaScript có thể thay đổi giá trị thuộc tính HTML
Trong ví dụ này, JavaScript thay đổi giá trị của thuộc tính src (nguồn) của thẻ <img>:
<!DOCTYPE html> <html> <body> <h2>Javascript có thể làm những gì?</h2> <p>JavaScript có thể thay đổi giá trị HTML attribute.</p> <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Bật đèn</button> <img id="myImage" src="pic_bulboff.gif" style="width:100px"> <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Tắt đèn</button> </body> </html>
JavaScript có thể thay đổi HTML (CSS):
Thay đổi kiểu của HTML element, là một biến thể của việc thay đổi thuộc tính HTML:
document.getElementById("demo").style.fontSize = "35px";
JavaScript có thể ẩn các phần tử HTML
Việc ẩn các HTML element có thể được thực hiện bằng cách thay đổi thuộc tính display:
document.getElementById("demo").style.display = "none";
JavaScript có thể hiển thị các phần tử HTML
Hiển thị các phần tử HTML ẩn cũng có thể được thực hiện bằng cách thay đổi thuộc tính display:
document.getElementById("demo").style.display = "block";