cài đặt hiển thị so với ẩn/hiển thị

Question

Sự khác nhau giữa element.css('visibility', 'visible') và element.show() là gì. Ngoài ra, sự khác biệt giữa element.css('visibility', 'hidden') và element.hide() là gì?

Cập nhật: Ngoài ra, cách thích hợp nhất để ẩn phần tử và là gì?

Cập nhật N2: Cách thích hợp để biết liệu phần tử (và cây con của nó) có thể nhìn thấy: element.is(':visible') hoặc element.css('visibility')?

Cập nhật N3: Có cách nào để ẩn phần tử (hoàn toàn) nhưng vẫn giữ khoảng trống/khu vực trên trang trình duyệt không? (Như xa như tôi đã có nó - một cách thích hợp sẽ được gọi hide() nhưng nó có thể dẫn đến các trang tái cấu trúc thị giác

Answer 1

Tầm nhìn vẫn sẽ bảo lưu không gian trong trình duyệt của bạn

Một yếu tố ẩn là.. thiết lập để display: none do đó tất cả các không gian chiếm đóng bởi yếu tố này sụp đổ. Nếu bạn chỉ đặt yếu tố để visibility: hidden nguyên tố này sẽ chỉ cần đi suốt nhưng không gian là chiếm đóng, nếu như phần tử vẫn còn đó.

.hide() bằng .css('display', 'none')
.show() là bằng đến .css('display', 'block') - Tôi khá chắc chắn jQuery thực hiện một số phép thuật ở đây để quyết định xem nó có thực sự là block mà nên đi vào đó nhưng nó có phần bằng nhau.

@Update:
Khi bạn ẩn một phần tử với .hide() (hoặc .css('display', 'none')) tất cả các yếu tố xuống dom-cây mà là con của yếu tố đó sẽ được ẩn quá.

@Update 2:
Nếu bạn đang sử dụng .hide() và .show() nó .is(':visible') Nếu bạn đang sử dụng thuộc tính css tầm nhìn sau đó .css('visibility')

@Update 3:
Đó là chính xác những gì .css('visibility', 'hidden') làm, nó ẩn phần tử mà không cần cấu trúc lại trang. .hide() sẽ hoàn toàn "xóa" phần tử.

Answer 2

được lấy từ w3c:

chế độ hiển thị: ẩn giấu một phần tử, nhưng nó vẫn chiếm không gian giống như trước. Phần tử sẽ bị ẩn nhưng vẫn ảnh hưởng đến bố cục.

hiển thị: không ẩn phần tử nào và nó sẽ không chiếm bất kỳ dung lượng nào.Yếu tố này sẽ được ẩn, và trang web sẽ được hiển thị như các phần tử không có ở đó:

Answer 3

jquery.hide() tương đương với gọi .css('display', 'none') và và jquery.show tương đương với gọi .css('display', 'block')

Phương pháp .css() chỉ được thiết lập thuộc tính tầm nhìn .

Từ quan điểm css của cái nhìn khác biệt:

visbility : hidden 

Giá trị ẩn làm cho các hộp tạo ra vô hình mà không loại bỏ chúng ra khỏi bố trí. Hộp con cháu có thể được hiển thị. See this

display : none 

Giá trị không làm cho phần tử tạo ra không có hộp nào cả. Các hộp hậu duệ cũng không thể tạo ra các hộp, ngay cả khi thuộc tính hiển thị của chúng được đặt thành một cái gì đó khác với không. See this

Với ẩn phần tử vẫn được tạo.

Answer 4

Chúng đang đặt 2 thuộc tính css khác nhau: hide/show đặt thuộc tính display thành none, chương trình sẽ xóa cài đặt này để mặc định được sử dụng (ví dụ: 'chặn' cho div).

Sự khác biệt như các câu trả lời khác chỉ ra là gọi hide trên một phần tử có nghĩa là nó (và tất cả tổ tiên của nó) sẽ không chiếm bất kỳ không gian nào. Khi đặt visibility thành hidden sẽ chỉ làm cho các yếu tố hoàn toàn trong suốt (nhưng vẫn chiếm không gian).

Đối với câu trả lời cho sửa đổi của bạn:

1. Ẩn tất cả tổ tiên (điều này được thực hiện tự động với cả hai phương pháp).
2. Sử dụng element.is(':visible') vì đây thực hiện một kiểm tra trên cả visibility và display tài sản và để xem nếu height và width không 0, nó cũng thực hiện nó một cách đệ quy trên tổ tiên, trong khi element.css('visibility') chỉ cho bạn biết visibility của nguyên tố này.
3. Đặt element.css('visibility', 'hidden') sẽ thực hiện việc này - không gọi số element.hide().

Answer 5

Ngoài giải thích bardiir ở đây là bản demo tốt của "display: none" và "visibility: hidden" http://www.w3schools.com/css/css_display_visibility.asp

"loại bỏ" bộ nút "display: none" và "ẩn" bộ nút " khả năng hiển thị: ẩn ".