Tôi đang sử dụng visibility:hidden để ẩn các yếu tố nhất định, nhưng chúng vẫn chiếm dung lượng trên trang trong khi ẩn.
Làm thế nào tôi có thể làm cho chúng biến mất hoàn toàn một cách trực quan, như thể chúng hoàn toàn không có trong DOM (nhưng không thực sự loại bỏ chúng khỏi DOM)?
Câu trả lời:
Hãy thử cài đặt display:noneđể ẩn và thiết lập display:blockđể hiển thị.
display: block, một số sẽ phải được đặt thành display: inline(chẳng hạn như <span>hoặc <a>hoặc <img>các phần tử DOM).
hiddenvới display: none. Thêm lớp vào một phần tử để ẩn nó, loại bỏ nó hiển thị. Khi gỡ bỏ nó, thuộc displaytính được khôi phục về thành phần mặc định.
Để sử dụng display:nonelà một tùy chọn tốt chỉ cần loại bỏ một phần tử NHƯNG nó cũng sẽ bị xóa cho trình đọc màn hình . Cũng có những cuộc thảo luận nếu nó ảnh hưởng đến SEO. Có một bài viết ngắn, hay về chủ đề đó trên A List Apart
Nếu bạn thực sự chỉ muốn ẩn và không xóa phần tử, hãy sử dụng tốt hơn:
div {
position: absolute;
left: -999em;
}Như thế này nó cũng có thể được đọc bởi trình đọc màn hình.
Nhược điểm duy nhất của phương pháp này là, DIV này thực sự được hiển thị và nó có thể ảnh hưởng đến hiệu suất , đặc biệt là trên điện thoại di động.
visibility: hidden;, giả sử bạn có các yếu tố tuyệt đối khác, chúng sẽ không có xung đột cho không gian, chỉ là xung đột z-index. Chỉ để che giấu một yếu tố tôi sẽ đi cùngvisibility
Hãy nhìn, thay vì sử visibility: hidden;dụng display: none;. Tùy chọn đầu tiên sẽ ẩn nhưng vẫn chiếm dung lượng và tùy chọn thứ hai sẽ ẩn và không chiếm bất kỳ khoảng trống nào.
Câu trả lời cho câu hỏi này là nói sử dụng display: none và display: block, nhưng điều này không giúp ích cho ai đó đang cố gắng sử dụng chuyển tiếp css để hiển thị và ẩn nội dung bằng thuộc tính hiển thị.
Điều này cũng khiến tôi phát điên, bởi vì sử dụng màn hình sẽ giết chết mọi chuyển đổi css.
Một giải pháp là thêm phần này vào lớp sử dụng khả năng hiển thị:
overflow:hiddenĐể làm việc này không phụ thuộc vào bố cục, nhưng nó nên giữ nội dung trống trong div mà nó nằm trong đó.
display: none is Solution, Điều đó che giấu hoàn toàn các yếu tố với không gian của nó.
display:nonevàvisibility: hiddenvisibility:hidden có nghĩa là thẻ không hiển thị, nhưng không gian được phân bổ cho nó trên trang.
display:nonecó nghĩa là hoàn toàn che giấu các yếu tố với không gian của nó. (mặc dù bạn vẫn có thể tương tác với nó thông qua DOM)
display:noneđể ẩn và thiết lập display:blockđể hiển thị.
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddenchỉ dừng hiển thị nội dung nhưng vẫn sử dụng không gian dọc / ngang, hiển thị: không loại bỏ không gian dọc / ngang cho phần tử.
Toggling displaykhông cho phép chuyển đổi CSS mượt mà. Thay vào đó, chuyển đổi cả visibilityvà max-height.
visibility: hidden;
max-height: 0;transform: translateX(-100%). Chúng tôi không muốndisplay: none
Đây là một cách khác để đưa chúng trở lại sau khi hiển thị: không có. không sử dụng display: block / inline, v.v. Thay vào đó (nếu sử dụng javascript), đặt hiển thị thuộc tính css thành '' (tức là để trống)
Trên kiến thức của tôi, có thể theo 4 cách
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);
offsetTop, vàdisplay:nonesẽ đặt thànhoffsetTop0. Giải pháp của tôi ở đây là sử dụngvisibility: hiddensau đó đặt chiều rộng và chiều cao thành 0. Một khi tôi cần làm cho phần tử hiển thị lại, tôi đã xóa ba thuộc tính bằng cách sử dụng Javascript. Một chút giải pháp hacky, nhưng nó hoạt động tốt cho hầu hết các trường hợp sử dụng.