Làm cách nào để ẩn phần tử trong HTML bằng CSS?

< nội dung >
    < div >
      < p id = "first">
       Đoạn đầu tiên .
        p >
      < p id = "second">
       Đoạn thứ hai .
        p >
    div >
cơ thể>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

< div >
      < p ẩn >
       Đoạn đầu tiên .

        p >
      < p >
       Đoạn thứ hai .
        p >
div>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

Làm cách nào để ẩn phần tử HTML trong CSS?

Làm cách nào để ẩn phần tử HTML?

Làm cách nào để hiển thị và ẩn div bằng CSS?