Hãy viết ứng dụng ẩn và hiện một thẻ div bằng Javascript bằng cách tạo ra 2 button, khi click vào button1 thì ẩn thẻ div và khi click vào button2 thì hiển thị thẻ div.
Chúng ta sử dụng thuộc tính CSS display:block để hiển thị thẻ div và thuộc tính display:none để ẩn thẻ div. Nhưng vấn đề là ta phải sử dụng Javascript để làm điều này nên ta phải sử dụng cú pháp dưới đây để thay đổi giá trị cho thuộc tính CSS display.
document.getElementById('id_name').style.display = "block|none";Sau đây là bài giải tham khảo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Example</title>
</head>
<body>
<h2>Ẩn và hiện thẻ div bằng Javascript</h2>
<p>Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div</p>
<div id="content" style="border: solid 1px; padding: 20px; background: #ddd;">
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình <a href="https://freetuts.net" title="học lập trình">freetuts.net</a>
</div>
<br/>
<input type="button" id="btn1" value="Ẩn"/>
<input type="button" id="btn2" value="Hiển Thị"/>
<script language="javascript">
document.getElementById("btn1").onclick = function () {
document.getElementById("content").style.display = 'none';
};
document.getElementById("btn2").onclick = function () {
document.getElementById("content").style.display = 'block';
};
</script>
</body>
</html>Học Javascript qua các bài tập thực hành
Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.
-------------------#####-------------------
-------------------#####-------------------
Nguồn: freetuts.net
