2009-07-21 58 views
71

display:none có nghĩa là phần tử không được hiển thị như là một phần của DOM, vì vậy nó không được tải cho đến khi thuộc tính hiển thị thay đổi thành cái gì khác.Tại sao jQuery hiển thị/ẩn hiển thị sử dụng: không hiển thị thay vì hiển thị: bị ẩn?

visibility:hidden tải phần tử, nhưng không hiển thị phần tử đó.

Tại sao jQuery sử dụng display:none cho các chức năng hiển thị/ẩn của nó thay vì chuyển đổi giữa visibility:hiddenvisibility:visible?

+1

@RyanErb bạn có thực sự cố gắng đọc (và hiểu) các câu hỏi hoặc bạn chỉ cần khớp từ khóa không? – TMS

Trả lời

65

Bởi vì trong display:none, phần tử, cho tất cả các mục đích, không còn tồn tại - nó không chiếm bất kỳ không gian nào. Tuy nhiên, trong visibility:hidden, dường như bạn vừa thêm opacity:0 vào phần tử - nó chiếm cùng một khoảng không gian nhưng chỉ hoạt động vô hình.

Người sáng tạo jQuery có thể nghĩ rằng người sáng tạo trước đây sẽ phù hợp hơn cho .hide().

+0

Vì vậy, cần có cách chuyển đổi giữa các kỹ thuật có đối tượng chiếm không gian cần thiết để thực hiện các phép tính! –

10

Khả năng hiển thị: ẩn làm cho phần tử ẩn đi theo cách nó vẫn sử dụng không gian tại trang. Hiển thị: không có phần tử nào có không gian và hoàn toàn biến mất, trong khi phần tử vẫn tồn tại trong DOM.

6

Khả năng hiển thị chỉ làm cho phần tử ẩn đi, nhưng nó vẫn chiếm dung lượng trên màn hình.

18

visibility: hidden làm cho phần tử ẩn nhưng không xóa phần tử khỏi bố cục của trang. Nó để lại một cái hộp rỗng, nơi nguyên tố đó. display: none xóa nó khỏi bố cục để nó không chiếm bất kỳ không gian nào trên trang, thường là những gì mọi người muốn khi họ ẩn nội dung nào đó.

+0

nhưng trong một số trường hợp khả năng hiển thị thực sự, hữu ích .. như bạn muốn giữ bố cục của bạn nhất quán ... và giao diện người dùng không co lại khi ẩn/hiển thị –

1

Visibility:hidden chỉ làm cho phần tử ẩn đi nhưng được tải trong DOM để nó tiêu thụ thời gian tải. Nhưng Display:none không tải phần tử.

Các vấn đề liên quan