Có thể xảy ra tình huống khi bạn không muốn một số nội dung xuất hiện trên trang web. Chẳng hạn, các thành phần của trang web, chẳng hạn như thanh điều hướng, đầu trang, chân trang, v.v. Hơn nữa, đôi khi trong khi thiết kế bất kỳ phần cụ thể nào trong ứng dụng web của chúng tôi, chúng tôi thường cần ẩn một số thành phần. Đối với tương ứng, có nhiều phương pháp để ẩn các phần tử HTML bằng CSS
Kết quả của blog này là
Làm cách nào để ẩn các phần tử HTML bằng CSS?
Nhiều phương pháp CSS có thể được sử dụng để ẩn các phần tử HTML. Một số trong số họ được liệt kê dưới đây
- trưng bày. không có
- tài sản ẩn
- hiển thị. ẩn giấu
- lọc. độ mờ [0]
- thuộc tính đường dẫn clip
- tràn ra. ẩn giấu
- độ mờ đục. 0
- biến đổi. quy mô[0]
- trong suốt
- cỡ chữ
Hãy lần lượt giải thích từng phương pháp nêu trên. Nhưng trước đó, chúng tôi sẽ tạo một tệp HTML để trình diễn
Điều kiện tiên quyết. Tạo trang HTML
In the HTML file, inside the body element, first, add a “
Đoạn đầu tiên .
Đoạn thứ hai .
body>
Phương pháp 1. Ẩn các phần tử HTML bằng cách sử dụng CSS “hiển thị. không” Tài sản
Thuộc tính CSS “hiển thị” với giá trị “none” loại bỏ phần tử này và cho phép các phần tử khác thế chỗ của nó. Chẳng hạn, chúng tôi muốn ẩn đoạn thứ hai. Đối với điều này, thuộc tính CSS đã thảo luận được áp dụng cho nó như hình bên dưới
#thứ hai {
trưng bày. không có;
}
- “#second” đề cập đến div với id thứ hai
- thuộc tính “hiển thị” được gán giá trị “none”
Có thể thấy rằng bây giờ đoạn thứ hai bị ẩn
Phương pháp 2. Ẩn phần tử HTML bằng cách sử dụng thuộc tính “hidden”
Một phương pháp khác để ẩn phần tử HTML là viết thuộc tính “hidden” với phần tử như sau
Đoạn đầu tiên .
Đoạn thứ hai .
div>
Có thể thấy rằng phần tử đầu tiên bị ẩn
Phương pháp 3. Ẩn các phần tử HTML bằng CSS “khả năng hiển thị. tài sản ẩn
Thuộc tính “khả năng hiển thị” của CSS cũng có thể được sử dụng để chỉ ẩn phần tử một cách trực quan, theo cách mà các phần tử khác không thể thay thế chúng. Trong ví dụ bên dưới, giá trị thuộc tính “khả năng hiển thị” được đặt thành “ẩn” cho phần tử HTML đầu tiên
#Đầu tiên {
hiển thị. ẩn giấu;
}
Đầu ra tương ứng có thể được nhìn thấy từ hình ảnh dưới đây
Phương pháp 4. Ẩn các phần tử HTML bằng cách sử dụng bộ lọc CSS. độ mờ [0]”
Bộ lọc áp dụng độ trong suốt cho các phần tử. Trong ví dụ, thuộc tính “filter” được gán giá trị là “opacity[0]”, có nghĩa là nó sẽ hoàn toàn trong suốt trên trang web
#thứ hai {
bộ lọc. độ mờ [0] ;
}
Từ màn hình bên dưới, chúng ta có thể quan sát thấy đoạn có id “thứ hai” bị ẩn
Phương pháp 5. Ẩn các phần tử HTML bằng CSS “clip-path. vòng tròn[0]” Thuộc tính
Thuộc tính clip-path cho biết phần nào của trang web sẽ được hiển thị
Trong ví dụ sau, thuộc tính “clip-path” có giá trị “circle[0]” cho biết rằng không có nội dung nào được hiển thị liên quan đến thẻ đã thêm
#Đầu tiên {
đường dẫn clip. hình tròn [0] ;
}
Đây là màn hình đầu ra, biểu thị rằng phần tử thứ hai được hiển thị và đoạn đầu tiên không hiển thị
Phương pháp 6. Ẩn các phần tử HTML bằng CSS “tràn. tài sản ẩn
Thuộc tính “overflow” được gán giá trị “hidden” để kiểm soát nội dung. Kết quả là luồng bị cắt bớt và nội dung còn lại bị ẩn
#thứ hai {
chiều cao. 0px;
chiều rộng. 0px;
tràn ra. ẩn giấu;
}
- Đầu tiên, đặt chiều cao và chiều rộng của div id thứ hai là 0px
- Nội dung sẽ tràn từ khu vực được chỉ định
- Sau đó, thuộc tính “overflow” được gán giá trị “hidden” để ẩn nội dung
Từ đầu ra bên dưới, chúng ta có thể thấy phần tử thứ hai không hiển thị
Phương pháp 7. Ẩn các phần tử HTML bằng cách sử dụng CSS “độ mờ. 0” tài sản
Mức độ mờ đục là mức độ trong suốt của phần tử. Thuộc tính “opacity” có giá trị “0” có nghĩa là phần tử sẽ hoàn toàn trong suốt
#Đầu tiên {
độ mờ. 0 ;
}
đầu ra
Phương pháp 8. Ẩn các phần tử HTML bằng cách sử dụng biến đổi CSS. tỷ lệ [0]” Thuộc tính
Hàm “scale[]” thay đổi kích thước phần tử theo chiều ngang và chiều dọc. Giá trị scale[0] của thuộc tính "transform" cho biết phần tử có kích thước bằng 0 có nghĩa là nó bị ẩn
#Đầu tiên {
biến đổi. tỷ lệ [0] ;
}
đầu ra
Phương pháp 9. Ẩn các phần tử HTML bằng cách áp dụng các thuộc tính với hiệu ứng “trong suốt”
Hãy làm cho phần tử thứ hai hoàn toàn trong suốt. Đối với điều này, hãy gán giá trị thuộc tính “background-color” và “color” là “transparent”
#thứ hai {
màu nền. trong suốt;
màu sắc. trong suốt;
}
Phần tử thứ hai hoàn toàn trong suốt so với phần tử thứ nhất. Đó là lý do tại sao nó không thể được nhìn thấy trên màn hình
Chúng tôi đã giải thích một số phương pháp CSS có thể có để ẩn các phần tử HTML
Phần kết luận
CSS cho phép chúng ta sử dụng các thuộc tính khác nhau để ẩn các phần tử HTML. Những thuộc tính này bao gồm “hiển thị. không”, “ẩn”, “hiển thị. ẩn”, “bộ lọc. độ mờ [0]”, “đường dẫn clip. circle[0]”, “tràn. ẩn”, “độ mờ. 0”, “biến đổi. scale[0]”, hoặc áp dụng các thuộc tính khác như màu sắc với hiệu ứng “trong suốt”. Blog này đã thảo luận về quy trình ẩn các phần tử HTML bằng CSS