Bạn có thể ẩn một phần tử trong CSS bằng cách sử dụng thuộc tính CSS display:none hoặc khả năng hiển thị: ẩn . display:none xóa toàn bộ phần tử khỏi trang và ảnh hưởng đến bố cục của trang. khả năng hiển thị: ẩn ẩn phần tử trong khi vẫn giữ nguyên khoảng trắng.
Bạn có thể gặp phải tình huống muốn ẩn một thành phần trên trang web. Ví dụ:bạn có thể có một khối văn bản mà bạn muốn ẩn và xuất hiện khi người dùng nhấp vào nút.
Có hai cách tiếp cận chính để ẩn một phần tử trong CSS, sử dụng:
- Màn hình:không có thuộc tính nào.
- Khả năng hiển thị:thuộc tính ẩn.
Cách tiếp cận đầu tiên có thể ảnh hưởng đến bố cục trang web của bạn. Tuy nhiên, phương pháp thứ hai vẫn phổ biến.
Phần tử ẩn CSS:hiển thị
Thuộc tính display kiểm soát cách hiển thị một phần tử trên trang web. Mọi phần tử trong tài liệu HTML đều có giá trị mặc định cho thuộc tính display, mặc dù giá trị đó phụ thuộc vào phần tử. Đối với hầu hết các phần tử, giá trị hiển thị mặc định là block hoặc nội tuyến .
Nếu bạn không muốn một phần tử hiển thị trên một phần tử nào đó, bạn có thể đặt giá trị của display không có tài sản nào.
Quy tắc kiểu sau đây ẩn một phần tử trên trang web:
Khi bạn đặt giá trị của display thành không, phần tử bị ảnh hưởng sẽ biến mất. Điều này có nghĩa là phần tử sẽ không còn chiếm bất kỳ khoảng trống nào trên trang web nữa.
hiển thị:không có Ví dụ
Giả sử chúng ta đang thiết kế một phần Giới thiệu về chúng tôi trang web của một câu lạc bộ nấu ăn địa phương. Trong thiết kế ban đầu của chúng tôi, chúng tôi đã thêm hình ảnh một chiếc bánh vào trang. Bây giờ câu lạc bộ muốn chúng tôi giấu hình ảnh vì họ không chắc chắn về thiết kế cuối cùng.
Chúng tôi có thể ẩn hình ảnh trên trang bằng mã 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>
Bấm vào trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML/CSS của chúng tôi.
Chúng tôi đã xác định ba phần tử trong thẻ HTML
được sử dụng để tạo tiêu đề của chúng tôi và chứa văn bản Giới thiệu về chúng tôi . Phần tử HTML ![]()
của chúng tôi tạo ra hình ảnh một chiếc bánh cao 200px và rộng 200px. Phần tử
chứa mô tả ngắn gọn về câu lạc bộ.
Trong mã CSS, chúng tôi sử dụng bộ chọn “img” để chọn tất cả các thẻ hình ảnh trên trang của mình. Quy tắc này đặt thuộc tính hiển thị của tất cả các thẻ thành none . Hay nói cách khác, quy tắc kiểu sẽ ẩn hình ảnh của chúng ta.
Mặc dù hình ảnh của chúng tôi bị ẩn nhưng nó vẫn tồn tại trên trang web của chúng tôi. Nếu muốn đưa hình ảnh của mình trở lại, chúng ta có thể xóa display:none; phong cách. Hoặc, chúng ta có thể chỉ định kiểu hiển thị khác (như chặn hoặc nội tuyến ).
Bạn có thể xác định quy tắc này dưới dạng thuộc tính HTML nội tuyến:
Để tìm hiểu thêm về các thuộc tính CSS và HTML nội tuyến, hãy xem hướng dẫn CSS nội tuyến của chúng tôi.
Phần tử ẩn CSS:khả năng hiển thị
Thuộc tính hiển thị CSS được sử dụng để kiểm soát xem một phần tử có hiển thị trên trang web hay không.
Theo mặc định, giá trị của khả năng hiển thị thuộc tính hiển thị . Tuy nhiên, nếu bạn muốn ẩn hình ảnh, bạn có thể đặt giá trị khả năng hiển thị để ẩn .
Quy tắc kiểu sau đây đặt chế độ hiển thị của một phần tử thành ẩn:
Hãy quay lại ví dụ về câu lạc bộ nấu ăn trước đó. Giả sử chúng ta muốn ẩn hình ảnh chiếc bánh trên Giới thiệu về chúng tôi trang web. Chúng ta có thể làm như vậy bằng cách sử dụng mã này:
<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>
Bấm vào trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML/CSS của chúng tôi.
Mã HTML của chúng tôi giống nhau trong ví dụ này. Trong tệp CSS của chúng tôi, thay vì sử dụng display thuộc tính, chúng tôi đã sử dụng khả năng hiển thị để ẩn phần tử của chúng tôi. Như bạn có thể thấy ở trên, hình ảnh của chúng tôi đã bị ẩn khỏi trang web.
Mặc dù hình ảnh của chúng tôi không còn nữa, nhưng giờ đây có một khoảng trống giữa tiêu đề và đoạn văn nơi hình ảnh lẽ ra sẽ được đặt. Đây là một tính năng của khả năng hiển thị:ẩn; phong cách. Khoảng trống của phần tử ban đầu vẫn được trang web giữ lại. Tuy nhiên, phần tử này bị ẩn.
Chế độ hiển thị CSS so với hiển thị
Hai phương pháp chúng ta đã thảo luận về việc ẩn một phần tử có vẻ giống nhau nhưng có sự khác biệt giữa hai phương pháp này.
màn hình:không có quy tắc loại bỏ một phần tử khỏi tài liệu HTML. Mặc dù mã của phần tử ẩn vẫn còn tồn tại nhưng bản thân phần tử đó sẽ không được hiển thị.
Chế độ hiển thị:ẩn mặt khác, quy tắc sẽ ẩn một phần tử nhưng phần tử đó vẫn sẽ chiếm dung lượng trên trang web. Nếu bạn muốn ẩn một phần tử nhưng vẫn giữ khoảng trống của phần tử đó trên trang web, hãy sử dụng visibility:hidden; quy tắc là tốt nhất.
"Nghề nghiệp Karma bước vào cuộc đời tôi khi tôi cần nó nhất và nhanh chóng giúp tôi tham gia chương trình đào tạo. Hai tháng sau khi tốt nghiệp, tôi đã tìm được công việc mơ ước phù hợp với những giá trị và mục tiêu trong cuộc sống của mình!"
Venus, Kỹ sư phần mềm tại Rockbot
Tìm trận đấu Bootcamp của bạn
Kết luận
màn hình:không có quy tắc xóa một phần tử khỏi tài liệu và ẩn nó khỏi chế độ xem. Chế độ hiển thị:ẩn quy tắc ẩn một phần tử trên tài liệu và để lại khoảng trống mà lẽ ra phần tử đó sẽ xuất hiện trống.
Bạn có muốn tìm hiểu 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 chứa đầy những lời khuyên hữu ích về cách học CSS. Bạn cũng sẽ tìm thấy danh sách các tài nguyên hàng đầu mà bạn có thể sử dụng để nâng cao kiến thức của mình.