Thuộc tính visibility kiểm soát việc phần tử có hiển thị hay không. Khác với display: none: visibility: hidden ẩn phần tử nhưng **vẫn chiếm diện tích** trong layout (không gian vẫn được dành cho nó).
Ví dụ minh họa
Mã sau ẩn/hiện đoạn văn khi nhấn nút:
<!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 chỗ, layout không thay đổi */
}
function showElement() {
document.getElementById("pid").style.visibility = "visible";
}
</script>
</body>
</html>
visibility vs display
| Đặc điểm | visibility: hidden |
display: none |
|---|---|---|
| Hiển thị | Ẩn | Ẩn |
| Chiếm diện tích layout | Có (vẫn giữ không gian) | Không (rời khỏi luồng) |
| Sự kiện click | Không nhận (nhưng con có thể nhận nếu visible) | Không nhận |
| Con có thể hiển thị? | Có (set visibility: visible trên con) | Không (con cũng bị ẩn theo) |
| Transition/Animation | Hỗ trợ (có thể animate opacity) | Không hỗ trợ trực tiếp |
Các giá trị của visibility
visible(mặc định): Hiển thị bình thường.hidden: Ẩn nhưng giữ layout.collapse: Dành cho hàng/cột bảng (<tr>,<thead>,<tfoot>,col,colgroup) — xóa và thu gọn không gian. Trên phần tử khác: giốnghidden.
Mẹo: Dùng opacity: 0 + pointer-events: none nếu muốn ẩn nhưng vẫn cho transition mượt mà.