Để hiển thị phần tử bị ẩn bằng visibility: hidden, bạn đặt visibility = "visible". Khác với display: none: visibility giữ chỗ layout, cho phép transition, và phần tử con có thể tự hiển thị bằng visibility: visible.
Ví dụ minh họa
Mã sau ẩn/hiện đoạn văn bằng 2 nút bấm:
<!DOCTYPE html>
<html>
<body>
<p id="pid">Văn bản demo</p>
<button type="button" onclick="hideElement()">Ẩn</button>
<button type="button" onclick="showElement()">Hiện</button>
<script>
function hideElement() {
document.getElementById("pid").style.visibility = "hidden";
/* Phần tử ẩn nhưng vẫn chiếm diện tích layout */
}
function showElement() {
document.getElementById("pid").style.visibility = "visible";
/* Phần tử hiện lại, layout không thay đổi */
}
</script>
</body>
</html>
visibility vs display (so sánh chi tiết)
| Đặc điểm | visibility: hidden |
display: none |
|---|---|---|
| Hiển thị | Ẩn | Ẩn |
| Chiếm layout | Có | Không |
| Sự kiện click | Không nhận (con có thể nếu visible) | Không nhận |
| Con có thể hiện? | Có (set visible trên con) | Không |
| Transition/Animation | Hỗ trợ (animate opacity) | Không hỗ trợ trực tiếp |
| Accessibility | Screen reader có thể đọc | Screen reader bỏ qua |
Khi nào dùng visibility?
- Muốn ẩn tạm thời nhưng **giữ layout ổn định** (không gây reflow).
- Cần **animate** show/hide (kết hợp
opacity). - Muốn **phần tử con vẫn có thể hiển thị** (tooltip, dropdown menu).
- Cần screen reader vẫn đọc nội dung.
Khi nào dùng display: none?
- Muốn **xóa hoàn toàn** khỏi layout (tiết kiệm không gian).
- Phần tử không cần truy cập, không cần animate.
- Cải thiện hiệu năng render (browser bỏ qua paint/layout cho subtree).