Thuộc tính hiển thị CSS
Ví dụ
Làm cho phần tử <h2> hiển thị và ẩn:
h2.a {
visibility: visible;
}
h2.b {
visibility: hidden;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính khả năng visibility
xác định xem một phần tử có hiển thị hay không.
Mẹo: Các phần tử ẩn chiếm không gian trên trang. Sử dụng thuộc tính display để vừa ẩn vừa xóa một phần tử khỏi bố cục tài liệu!
Giá trị mặc định: | dễ thấy |
---|---|
Thừa hưởng: | Đúng |
Hoạt hình: | Đúng. Đọc về hoạt hình |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | đối tượng .style.visibility="hidden" Hãy thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
visibility | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
Cú pháp CSS
visibility: visible|hidden|collapse|initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
visible | Default value. The element is visible | Demo ❯ |
hidden | The element is hidden (but still takes up space) | Demo ❯ |
collapse | Only for table rows (<tr>), row groups (<tbody>), columns (<col>),
column groups (<colgroup>). This value removes a row or column,
but it does not affect the table layout. The space taken up by the row or column
will be available for other content. If collapse is used on other elements, it renders as "hidden" |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Ví dụ này minh họa cách thu gọn một phần tử bảng:
tr.collapse {
visibility: collapse;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Hiển thị và hiển thị CSS
Tham chiếu DOM HTML: thuộc tính hiển thị