Sử dụng thuộc tính CSS visibility để thiết lập ẩn hiện phần tử HTML

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,491
Được Like
10,733
Sử dụng thuộc tính CSS visibility để thiết lập ẩn hiện phần tử HTML

Trong CSS có một thuộc tính để chỉ ra một phần tử là ẩn hay hiển thị trên trang đó là visibility. Các giá trị nó nhận có thể là: visible hidden collapse

Ẩn đi một phần tử bạn có thể dùng display: none hoặc visibility: hidden visibility: collapse tuy nhiên lưu ý có sự khác nhau: visibility:hidden ẩn đi phần tử, nhưng phần tử vẫn chiếm chỗ trong trang hiển thị.

Mã:
<style>
    div.hidden {
        visibility: hidden;
    }
</style>

<h2>Ví dụ visibility:hidden</h2>
<div class="hidden">
    Đoạn văn này bị ẩn đi.
</div>
<p>
    Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn.
</p>

screenshot_1591409334.png

Ví dụ trên nếu sử dụng display: none thì phần tử ẩn đi và chỗ nó chiếm bị thu hồi.
Mã:
<style>
    div.hidden1 {
        display: none;
    }
</style>
<div class="card p-1">
    <h2>Ví dụ visibility:hidden</h2>
    <div class="hidden1">
        Đoạn văn này bị ẩn đi.
    </div>
    <p>
        Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn.
    </p>
</div>

screenshot_1591409410.png

Chúc các bạn thành công.


Nguồn: Internet​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom