Giả sử sau đây là div của chúng tôi -
<div id="showOrHide"> Welcome in JavaScript </div>
Sau đây là nút của chúng tôi. Khi nhấp vào, div ở trên sẽ ẩn -
<button onclick="showOrHideDiv()">Click The Button</button>
Sử dụng khái niệm style.display trong JavaScript để ẩn div. Sau đây là mã -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button onclick="showOrHideDiv()">Click The Button</button>
<div id="showOrHide">
Welcome in JavaScript
</div>
<script>
function showOrHideDiv() {
var v = document.getElementById("showOrHide");
if (v.style.display === "none") {
v.style.display = "block";
} else {
v.style.display = "none";
}
}
</script>
</body>
</html> Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)” và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã VS.
Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi người dùng nhấp vào nút, div sẽ ẩn. Ảnh chụp màn hình như sau -
