Thuộc tính visibility của HTML DOM Style

Thuộc tính style.visibility trong HTML DOM trả về hoặc thiết lập trạng thái hiển thị của một phần tử trong tài liệu HTML. Khác với display: none, thuộc tính này vẫn giữ không gian bố cục của phần tử ngay khi nó bị ẩn.

Cú pháp

Lấy giá trị visibility

object.style.visibility

Thiết lập giá trị visibility

object.style.visibility = "giá_trị"

Các giá trị hợp lệ

Giá trị	Mô tả
initial	Đặt thuộc tính về giá trị mặc định.
inherit	Kế thừa giá trị từ phần tử cha.
hidden	Phần tử không hiển thị nhưng vẫn chiếm diện tích bố cục.
visible	Phần tử hiển thị bình thường (giá trị mặc định).
collapse	Chỉ áp dụng cho hàng/cột bảng: ẩn phần tử nhưng vẫn giữ không gian bố cục.

Ví dụ minh họa

Đoạn mã dưới đây minh họa việc ẩn một đoạn văn bản khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    color: #000;
    background: lightblue;
    height: 100vh;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem 0;
  }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính DOM Style visibility</h1>
<p>Tôi là phần tử đoạn văn bản với một số nội dung giả</p>
<button onclick="anDoanVan()" class="btn">Ẩn đoạn văn</button>
<script>
  function anDoanVan() {
    document.querySelector('p').style.visibility = "hidden";
  }
</script>
</body>
</html>

Kết quả

Ban đầu đoạn văn bản hiển thị bình thường. Sau khi nhấn nút "Ẩn đoạn văn", đoạn văn sẽ biến mất nhưng vẫn giữ nguyên khoảng trống trong bố cục trang.

Lưu ý quan trọng: Khác với display: none (loại bỏ hoàn toàn khỏi luồng bố cục), visibility: hidden chỉ làm cho phần tử vô hình mà không ảnh hưởng đến vị trí của các phần tử khác.