Sự khác nhau giữa $ (cửa sổ) .width() so với $ (tài liệu) .width()

Question

Sự khác nhau chính giữa $(window).width() và $(document).width() trong jQuery là gì? Cửa sổ có biểu thị trình duyệt và tài liệu thể hiện phần thân của trang html không? Tôi có đúng không?

Answer 1

Từ documentation of width():

Phương pháp này cũng có thể tìm thấy chiều rộng của cửa sổ và tài liệu.

$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document 

Simple jsFiddle Demo

Trong bản demo, tôi đã thiết html { width: 1000px; }, mà là lớn hơn viewport.

Chiều rộng của nội dung trang HTML của bạn là giá trị thứ ba. $('body').width() cũng có thể khác với hai loại kia (ví dụ: thử body { margin: 100px; }).

Answer 2

Có - chiều rộng cửa sổ là chiều rộng của cửa sổ trình duyệt và chiều rộng của tài liệu là chiều rộng của trang web.

Answer 3

Bạn là chính xác. các window là khu vực có thể xem được của trình duyệt. document là phần nội dung thực sự của trang. Vì vậy, document của bạn có thể mở rộng vượt xa window

Answer 4

$(window).width(); trả về chiều rộng của khung nhìn trình duyệt

$(document).width(); lợi nhuận chiều rộng của tài liệu HTML

$(document).width() là một chút không đáng tin cậy, kết quả là một giá trị thấp hơn cho một toàn chiếu trình duyệt. $ (window) .width() là an toàn hơn.

$(window).width() nhận toàn bộ chiều rộng của cửa sổ, bao gồm những thứ như thanh cuộn.

Answer 5

Vâng, window là thứ đầu tiên được tải vào trình duyệt. Đối tượng window này có phần lớn các thuộc tính như length, innerWidth, innerHeight, name, nếu nó đã bị đóng, cha mẹ của nó và nhiều hơn.

Còn đối tượng tài liệu thì sao?

Đối tượng document là tài liệu html của bạn sẽ được tải vào trình duyệt . document thực sự được tải bên trong đối tượng window và có các thuộc tính có sẵn cho nó như tiêu đề, URL, cookie, v.v. Điều gì thực sự có nghĩa là? ? Điều đó có nghĩa là nếu bạn muốn truy cập thuộc tính cho số window, nó là window.property, nếu đó là document thì là window.document.property cũng có sẵn dưới dạng document.property.

Vì vậy, kết luận tài liệu có thể nhỏ hơn cửa sổ.

FROM: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/

Answer 6

Một sự khác biệt quan trọng khác.

$(window).width(); có sẵn trước khi tải tài liệu/sẵn sàng

$(document).width(); chỉ có sẵn sau khi tài liệu đã được nạp

Vì vậy cho phần thứ hai, bạn cần

$(document).ready(function() { 
    var w = $(document).width(); 
});