Bạn có thể ẩn phần tử trong CSS dùng thuộc tính CSS display: none hoặc visibility: hidden. display: none loại bỏ toàn bộ phần tử khỏi trang và có thể ảnh hưởng bố cục trang. visibility: hidden ẩn phần tử nhưng giữ không gian như cũ.
Bạn có thể gặp tình huống muốn ẩn phần tử trên trang web. Ví dụ, bạn có thể có khối văn bản muốn giữ ẩn và hiện ra khi người dùng nhấp nút.
Có hai cách chính để ẩn phần tử trong CSS, dùng:
- Thuộc tính display: none.
- Thuộc tính visibility: hidden.
Cách đầu tiên có thể ảnh hưởng bố cục trang web. Nhưng phương pháp thứ hai vẫn phổ biến.
Ẩn phần tử CSS: display
Thuộc tính display kiểm soát cách phần tử hiển thị trên trang web. Mọi phần tử trong tài liệu HTML có giá trị mặc định cho thuộc tính display, tuy nhiên giá trị đó phụ thuộc vào phần tử. Đối với hầu hết phần tử, giá trị display mặc định là block hoặc inline.
Nếu bạn không muốn phần tử hiển thị trên trang hoàn toàn, bạn có thể đặt giá trị thuộc tính display là none.
Quy tắc style sau ẩn phần tử trên trang web:
Khi bạn đặt giá trị display là none, phần tử bị ảnh hưởng sẽ biến mất. Điều này nghĩa là phần tử sẽ không còn chiếm không gian nào trên trang web.
Ví dụ display: none
Giả sử chúng ta đang thiết kế trang web About Us (Về chúng tôi) cho câu lạc bộ nấu nướng địa phương. Trong thiết kế ban đầu, chúng ta thêm hình ảnh bánh ngọt vào trang. Bây giờ câu lạc bộ muốn chúng ta ẩn hình ảnh vì họ không chắc về thiết kế cuối cùng.
Chúng ta có thể ẩn hình ảnh trên trang dùng code sau:
<html> <div> <h1>About Us</h1> <img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /> <p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p> </div> <style> img { display: none; } <style>
Nhấp vào nút trong trình soạn thảo code trên để xem đầu ra code HTML/CSS của chúng ta.
Chúng ta định nghĩa ba phần tử trong thẻ HTML <div>. Phần tử <h1> dùng để tạo header, chứa văn bản About Us. Phần tử HTML <img> tạo hình ảnh bánh ngọt, cao 200px và rộng 200px. Phần tử <p> chứa mô tả ngắn về câu lạc bộ.
Trong code CSS, chúng ta dùng bộ chọn "img" để chọn tất cả thẻ hình ảnh trên trang. Quy tắc này đặt thuộc tính display của tất cả thẻ <img> là none. Nói cách khác, quy tắc style ẩn hình ảnh của chúng ta.
Mặc dù hình ảnh bị ẩn, nó vẫn tồn tại trên trang web. Nếu chúng ta muốn đưa hình ảnh trở lại, chúng ta có thể xóa style display:none;. Hoặc, chúng ta có thể chỉ định style display khác (như block hoặc inline).
Bạn có thể định nghĩa quy tắc này như thuộc tính HTML nội tuyến (inline HTML attribute):
<img style="display: none;" src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80″ height="200″ width="200″ />
Để học thêm về HTML nội tuyến và thuộc tính CSS, xem hướng dẫn inline CSS của chúng tôi.
Ẩn phần tử CSS: visibility
Thuộc tính visibility CSS được dùng để kiểm soát liệu phần tử có hiển thị trên trang web hay không.
Mặc định, giá trị thuộc tính visibility là visible. Tuy nhiên, nếu bạn muốn làm cho hình ảnh vô hình, bạn có thể đặt giá trị visibility là hidden.
Quy tắc style sau đặt visibility của phần tử thành hidden:
Hãy quay lại ví dụ câu lạc bộ nấu nướng trước. Giả sử chúng ta muốn ẩn hình ảnh bánh ngọt trên trang About Us. Chúng ta có thể làm vậy dùng code sau:
<html> <div> <h1>About Us</h1> <img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /> <p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p> </div> <style> img { display: visibility; } <style>
Nhấp vào nút trong trình soạn thảo code trên để xem đầu ra code HTML/CSS của chúng ta.
Code HTML của chúng ta giống hệt ví dụ trước. Trong file CSS, thay vì dùng thuộc tính display, chúng ta dùng visibility để ẩn phần tử. Như bạn thấy, hình ảnh đã bị ẩn khỏi trang web.
Mặc dù hình ảnh biến mất, giờ có khoảng trống giữa header và đoạn văn nơi hình ảnh sẽ được đặt. Đây là đặc điểm của style visibility: hidden;. Không gian của phần tử gốc vẫn được giữ bởi trang web. Nhưng phần tử bị ẩn.
CSS Visibility vs. Display
Hai phương pháp ẩn phần tử chúng ta đã thảo luận có vẻ giống nhau, nhưng có sự khác biệt giữa hai cái.
Quy tắc display: none loại bỏ phần tử khỏi tài liệu HTML. Mặc dù code cho phần tử ẩn vẫn hiện diện, phần tử chính nó sẽ không hiển thị.
Quy tắc visibility: hidden, mặt khác, ẩn phần tử, nhưng phần tử vẫn chiếm không gian trên trang web. Nếu bạn muốn ẩn phần tử nhưng giữ không gian của phần tử đó trên trang web, dùng quy tắc visibility: hidden; là tốt nhất.
Kết luận
Quy tắc display: none loại bỏ phần tử khỏi tài liệu và ẩn nó khỏi tầm nhìn. Quy tắc visibility: hidden ẩn phần tử trên tài liệu và để trống không gian nơi phần tử sẽ xuất hiện.
Bạn muốn học thêm về CSS? Đọc hướng dẫn "Cách học CSS" của chúng tôi. Hướng dẫn này đầy ắp lời khuyên thực tế về cách học CSS. Bạn cũng sẽ tìm thấy danh sách tài nguyên hàng đầu để nâng cao kiến thức.