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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,629
Được Like
12,671
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​
 

Top Bottom