Câu trả lời:
display:nonecó nghĩa là thẻ trong câu hỏi sẽ hoàn toàn không xuất hiện trên trang (mặc dù bạn vẫn có thể tương tác với nó thông qua dom). Sẽ không có không gian được phân bổ cho nó giữa các thẻ khác.
visibility:hiddencó nghĩa là không giống như display:none, thẻ không hiển thị, nhưng không gian được phân bổ cho nó trên trang. Thẻ được hiển thị, nó không được nhìn thấy trên trang.
Ví dụ:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | testThay thế [style-tag-value]bằng display:nonekết quả trong:
test | | testThay thế [style-tag-value]bằng visibility:hiddenkết quả trong:
test | | testvisibility: hiddenvà display: nonesẽ được thực hiện như nhau vì cả hai bố trí lại, sơn và hỗn hợp. Tuy nhiên, về mặt opacity: 0chức năng tương đương visibility: hiddenvà không điều chỉnh lại bước bố trí, vì vậy tôi sẽ khuyên bạn nên sử dụng nếu bạn không nhớ khoảng trống vẫn được phân bổ (nếu không sử dụng display: none).
opacity: 0nên thận trọng khi xử lý các đầu vào hoặc nút, vì chúng vẫn tồn tại và có thể gây ra các tương tác người dùng kỳ lạ.
Chúng không phải là từ đồng nghĩa.
display:none xóa phần tử khỏi luồng bình thường của trang, cho phép các phần tử khác điền vào.
visibility:hidden để lại phần tử trong luồng bình thường của trang sao cho vẫn chiếm không gian.
Hãy tưởng tượng bạn đang xếp hàng để đi xe tại một công viên giải trí và ai đó trong hàng sẽ trở nên ồn ào đến nỗi an ninh sẽ kéo họ ra khỏi hàng. Mọi người trong hàng sau đó sẽ di chuyển về phía trước một vị trí để lấp đầy chỗ trống hiện tại. Đây là như thế display:none.
Tương phản điều này với tình huống tương tự, nhưng ai đó trước mặt bạn mặc áo choàng tàng hình. Trong khi xem dòng, nó sẽ trông giống như có một khoảng trống, nhưng mọi người không thể thực sự lấp đầy khoảng trống trông đó bởi vì vẫn còn ai đó ở đó. Đây là như thế visibility:hidden.
Một điều đáng để thêm vào, mặc dù nó không được hỏi, đó là có một tùy chọn thứ ba là làm cho đối tượng hoàn toàn trong suốt. Xem xét:
1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.(Hãy nhớ nhấp vào nút "Chạy đoạn mã" ở trên để xem kết quả.)
Sự khác biệt giữa 1 và 2 đã được chỉ ra (cụ thể là, 2 vẫn chiếm dung lượng). Tuy nhiên, có một sự khác biệt giữa 2 và 3: trong trường hợp 3, chuột vẫn sẽ chuyển sang tay khi di chuột qua liên kết và người dùng vẫn có thể nhấp vào liên kết và các sự kiện Javascript vẫn sẽ kích hoạt liên kết. Đây thường không phải là hành vi bạn muốn (nhưng có lẽ đôi khi nó là?).
Một sự khác biệt nữa là nếu bạn chọn văn bản, sau đó sao chép / dán dưới dạng văn bản thuần túy, bạn sẽ nhận được những điều sau:
1st link.
2nd link.
3rd unseen link.Trong trường hợp 3 văn bản không được sao chép. Có lẽ điều này sẽ hữu ích cho một số loại hình chìm mờ hoặc nếu bạn muốn ẩn thông báo bản quyền sẽ hiển thị nếu người dùng bất cẩn sao chép / dán nội dung của bạn?
Có một sự khác biệt lớn khi nói đến các nút con. Ví dụ: Nếu bạn có div cha và div div con. Vì vậy, nếu bạn viết như thế này:
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>Trong trường hợp này, không ai trong số các div sẽ được nhìn thấy. Nhưng nếu bạn viết như thế này:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>Sau đó, div con sẽ hiển thị trong khi div cha sẽ không được hiển thị.
display: none loại bỏ hoàn toàn phần tử khỏi trang và trang được xây dựng như thể phần tử không có ở đó.
Visibility: hidden để lại không gian trong luồng tài liệu mặc dù bạn không thể nhìn thấy nó nữa.
Điều này có thể hoặc không thể tạo ra sự khác biệt lớn tùy thuộc vào những gì bạn đang làm.
Với visibility:hiddenđối tượng vẫn chiếm chiều cao dọc trên trang. Với display:nonenó là hoàn toàn loại bỏ. Nếu bạn có văn bản bên dưới một hình ảnh và bạn làm như vậy display:none, văn bản đó sẽ dịch chuyển lên để lấp đầy khoảng trống nơi hình ảnh đó. Nếu bạn nhìn thấy: ẩn văn bản sẽ vẫn ở cùng một vị trí.
display:nonesẽ ẩn phần tử và thu gọn không gian đang chiếm, trong khi đó visibility:hiddensẽ ẩn phần tử và bảo toàn không gian phần tử. display: none cũng ảnh hưởng đến một số thuộc tính có sẵn từ javascript trong các phiên bản IE và Safari cũ hơn.
Ngoài tất cả các câu trả lời khác, có một sự khác biệt quan trọng đối với IE8: Nếu bạn sử dụng display:nonevà cố gắng lấy chiều rộng hoặc chiều cao của phần tử, IE8 trả về 0 (trong khi các trình duyệt khác sẽ trả về kích thước thực tế). IE8 chỉ trả về chiều rộng hoặc chiều cao chính xác cho visibility:hidden.
display: none; Nó sẽ không có sẵn trên trang và không chiếm bất kỳ không gian.
visibility: hidden; nó ẩn một phần tử, nhưng nó vẫn sẽ chiếm không gian như trước. Các yếu tố sẽ được ẩn, nhưng vẫn, ảnh hưởng đến bố cục.
visibility: hiddenbảo tồn không gian, trong khi display: nonekhông bảo tồn không gian.
Không hiển thị Ví dụ: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
Ví dụ về khả năng hiển thị: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
Nếu thuộc tính hiển thị được đặt thành "hidden", trình duyệt sẽ vẫn chiếm không gian trên trang cho nội dung mặc dù nó không hiển thị.
Nhưng khi chúng ta đặt một đối tượng thành"display:none" , trình duyệt không phân bổ không gian trên trang cho nội dung của nó.
Thí dụ:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>Một điểm khác biệt nữa là nó visibility:hiddenhoạt động trong các trình duyệt thực sự, thực sự cũ và display:nonekhông:
Sự khác biệt vượt xa phong cách và được phản ánh trong cách các yếu tố hành xử khi được thao tác với JavaScript.
Tác dụng và tác dụng phụ của display: none:
clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), tất cả trở lại 0s.Tác dụng và tác dụng phụ của visibility: hidden:
innerText(nhưng không innerHTML) của phần tử đích và hậu duệ trả về chuỗi rỗng.display:none;sẽ không hiển thị phần tử cũng như không phân bổ không gian cho phần tử trên trang trong khi visibility:hidden;sẽ không hiển thị phần tử trên trang nhưng sẽ phân bổ không gian trên trang. Chúng ta có thể truy cập phần tử trong DOM trong cả hai trường hợp. Để hiểu nó theo cách tốt hơn, vui lòng xem đoạn mã sau:
display: none vs visual: hidden
Có rất nhiều câu trả lời chi tiết ở đây, nhưng tôi nghĩ tôi nên thêm nó vào địa chỉ khả năng truy cập vì có ý nghĩa.
display: none; và visibility: hidden; có thể không được đọc bởi tất cả các phần mềm đọc màn hình. Hãy ghi nhớ những gì người dùng khiếm thị sẽ trải nghiệm.
Câu hỏi cũng hỏi về từ đồng nghĩa. text-indent: -9999px;là một cái khác tương đương Sự khác biệt quan trọng vớitext-indent là nó thường sẽ được đọc bởi các trình đọc màn hình. Nó có thể là một chút kinh nghiệm xấu vì người dùng vẫn có thể tab vào liên kết.
Đối với khả năng truy cập, những gì tôi thấy được sử dụng ngày nay là sự kết hợp của các kiểu để ẩn một phần tử trong khi hiển thị cho trình đọc màn hình.
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}Một thực tiễn tuyệt vời là tạo liên kết "Bỏ qua nội dung" đến phần neo của nội dung chính. Người dùng khiếm thị có thể không muốn nghe cây điều hướng đầy đủ của bạn trên mỗi trang. Làm cho các liên kết ẩn trực quan. Người dùng chỉ cần nhấn tab để truy cập liên kết.
Để biết thêm về khả năng truy cập và nội dung ẩn, xem: