Cách thích hợp để ẩn bất kỳ thẻ HTML nào?

Question

CSS thích hợp để ẩn bất kỳ HTML nào. Ví dụ- Giống như <div> thẻ. Tôi sử dụng để thực hiện việc này:

div {display:none; visibility:hidden;} 

CSS có hỗ trợ tất cả các trình duyệt chính để ẩn div đó không. Đặc biệt là nó hỗ trợ I.E.

Answer 1

Cả hai display:none và visibility:hidden được hỗ trợ toàn cầu bởi trình duyệt hỗ trợ CSS, vì vậy chỉ áp dụng chung CSS caveat s. Có hiệu ứng khác nhau: display:none khiến tài liệu được hiển thị như thể phần tử không có ở đó, trong khi visibility:hidden có nghĩa là phần tử sẽ được xử lý hợp lệ khi định dạng tài liệu, thường chiếm một số không gian, nhưng bị xóa khỏi chế độ xem như thể nó đã được chuyển hoàn toàn minh bạch.

Loại nào bạn sử dụng tùy thuộc vào mục tiêu ẩn phần tử của bạn. Ví dụ, nếu bạn tự động (với một kịch bản phía máy khách) tắt hoặc trên một số nội dung, thì visibility:hidden có thể tốt hơn vì nó không gây ra việc vẽ lại nội dung khác.

Sử dụng cả hai thường là vô nghĩa, vì display:none làm cho visibility:hidden không liên quan (mặc dù trong thác, có thể xảy ra cài đặt của bạn cho các thuộc tính này có thể bị ghi đè bởi các trang mẫu khác và sau đó display:none có thể mất hiệu lực).

Answer 2

Bạn thậm chí không cần visibility:hidden;.

div { 
    display:none; 
} 

Điều trên là đủ. Và nó hoạt động trong tất cả các trình duyệt. Nó khá nhiều ẩn các yếu tố hoàn toàn, như trong, nó sẽ không còn có một ảnh hưởng trong bố cục trang.

Answer 3

display : none; là cách đủ và tiêu chuẩn để làm điều này

Answer 4

Sử dụng visibility: hidden; nếu bạn vẫn muốn phần tử để chiếm không gian trong cách bố trí trang. Ví dụ:

Hello 
 
<div style="visibility: hidden; height: 100px;">Hidden</div> 
 
World

Bạn sẽ vẫn thấy 100px giữa hai đoạn văn bản, nhưng bạn sẽ không thấy nội dung bên trong div.

Sử dụng:

Hello 
 
<div style="display: none; height: 100px;">Hidden</div> 
 
World​​​​​

Sẽ không có khoảng trống giữa các yếu tố văn bản hai, như div sẽ không ảnh hưởng đến bố trí ở tất cả.

Cả hai đều được hỗ trợ trong mọi trình duyệt hiện đại mà bạn có thể nghĩ đến.

Answer 5

Trong HTML5 có thuộc tính toàn cục mới có tên hidden.

Từ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden:

Các thuộc tính ẩn toàn cầu là một thuộc tính Boolean chỉ ra rằng nguyên tố này chưa, hoặc không còn, có liên quan.Ví dụ, nó có thể được sử dụng để ẩn các phần tử của trang không thể được sử dụng cho đến khi quá trình đăng nhập hoàn tất. Trình duyệt sẽ không hiển thị các phần tử có thuộc tính ẩn được đặt.

Hãy coi chừng rằng hidden có ý nghĩa ngữ nghĩa so với display và visibility. Đó là lý do tại sao nó không phải là một thuộc tính CSS, nhưng là một thuộc tính HTML.