Thuộc tính visibility trong CSS

Trong CSS bạn có thể sử dụng thuộc tính visibility để kiểm soát xem một phần tử có được hiển thị (visible) hay không.

Thuộc tính này có thể nhận một trong các giá trị sau được liệt kê dưới đây:

• visible: Giá trị mặc định. Hộp và nội dung của phần tử có thể nhìn thấy.
• hidden: Hộp và nội dung của nó vô hình (invisible), nhưng vẫn ảnh hưởng đến bố cục của trang.
• collapse: Giá trị này khiến toàn bộ hàng (row) hoặc cột (column) bị xóa khỏi màn hình hiển thị. Giá trị này được sử dụng cho các phần tử hàng, nhóm hàng, cột và nhóm cột.
• inherit: Chỉ định rằng giá trị của thuộc tính visibility phải được kế thừa từ phần tử cha. Tức là nhận cùng một giá trị hiển thị như được chỉ định cho phần tử gốc của nó.

Kiểu visibility: collapse; loại bỏ các phần tử bên trong bảng, nhưng nó không ảnh hưởng đến bố cục của bảng theo bất kỳ cách nào khác.

Khoảng trống thường được chiếm bởi các phần tử bảng sẽ được lấp đầy bởi các phần tử tiếp theo.

Lưu ý: Nếu quy tắc visibility: collapse; được chỉ định cho các phần tử khác chứ không phải các phần tử bảng, nó gây ra hành vi tương tự như hidden.

Các thuộc tính visibility và display trong CSS có vẻ giống nhau, nhưng thực tế chúng khá khác nhau và thường gây nhầm lẫn cho những người mới học lập trình web.

• visibility: hidden; sẽ ẩn phần tử, nhưng nó vẫn chiếm không gian trong bố cục. Phần tử con của một hộp hidden sẽ hiển thị nếu khả năng hiển thị của chúng được đặt thành visible.

Trong khi đó:

• display: none; tắt hiển thị và xóa hoàn toàn phần tử khỏi document. Nó không chiếm bất kỳ không gian nào nữa. Mặc dù thẻ HTML vẫn nằm trong mã nguồn. Tất cả các phần tử con cũng bị tắt hiển thị, ngay cả khi thuộc tính display của các phần tử con có được đặt khác đi.

Hãy thử ví dụ sau:

HTML:

<div class="testVisibility">Đây là một thẻ DIV bị ẩn khả năng hiển thị mà vẫn <span>chiếm không gian</span></div>
<div class="testDisplay">Đây là một thẻ DIV bị ẩn khả năng hiển thị mà vẫn <span>chiếm không gian</span></div>

CSS:

div {
    width: 500px;
    height: 200px;
}

.testVisibility {
    background: #333;
    border: 1px solid grey;
    visibility: hidden; /*Làm nó vô hình*/
}
/* Hiển thị phần tử span trong thẻ div đầu tiên*/
.testVisibility>span {
    visibility: visible;
}

.testDisplay {
    background: #333;
    border: 1px solid grey;
    display: none; /*Tắt hiển thị*/
}
/* Cố gắng hiển thị phần tử span trong thẻ div thứ 2*/
.testDisplay>span {
    display: block;
}

Thử chạy trên trình duyệt xem như thế nào nhé.

Ở đây, mình đã ẩn 2 thẻ div bằng visibility: hidden; và display: none;

Và phần tử span trong thẻ 2 div đó thì cho nó hiển thị với visibility: visible; và display: block;

Rõ ràng chúng ta thấy cách hành xử của chúng khác nhau.

Một cái thì chỉ đơn giản là người dùng không nhìn thấy nhưng vẫn chiếm không gian. Còn một cái thì mất hẳn, không chiếm không gian luôn.

Trên đây là bài viết của eLib.VN về thuộc tính visibility trong CSS. Trong lập trình web, tùy theo mục đích thực tế mà bạn có thể sử dụng thuộc tính visibility hoặc thuộc tính display để mang lại hiệu quả khác nhau.