Разница между $ (окно) .width () и $ (документ) .width ()

Question

В чем основная разница между $(window).width() против $(document).width() в jQuery?Окно ли обозначает браузер, а документ представляет собой тело html страницы?Я прав ?

Answer 1

Из документации width():

Этот метод также позволяет найти ширину окна и документа.

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

Простая демонстрация jsFiddle

В демоверсии я установил html { width: 1000px; }, который больше, чем область просмотра.

Ширина тела вашего HTMLстраница является третьим значением.$('body').width() также может отличаться от двух других (например, попробуйте body { margin: 100px; }).

Answer 2

Вы правы.window - видимая область браузера.document - это собственно тело страницы.Таким образом, ваш document может простираться далеко за пределы window

Answer 3

Ну, window - это первое, что загружается в браузер. Этот window объект обладает большинством свойств, таких как length, innerWidth, innerHeight, name, если он был закрыт, его родители и больше.

А как насчет объекта документа?

Объект document - это ваш HTML-документ, который будет загружен в браузер. document фактически загружается внутри объекта window и имеет доступные ему свойства, такие как заголовок, URL, cookie и т. д. Что это действительно значит? Это означает, что если вы хотите получить доступ к собственности для window это window.property, если document это window.document.property, который также доступен как document.property.

Таким образом, в заключение документ может быть меньше окна.

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

Answer 4

$(window).width(); возвращает ширину окна просмотра браузера

$(document).width(); возвращает ширину HTML-документа

$(document).width() немного ненадежно, что приводит к снижению значения для полноэкранного браузера. $ (window) .width () безопаснее.

$(window).width() получает всю ширину окна, включая такие вещи, как полоса прокрутки.

Answer 5

Другое важное отличие.

$(window).width(); доступно до загрузки / готовности документа

$(document).width(); доступно только после загрузки документа

Так что дляво-вторых, вам нужно

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

Answer 6

Да - ширина окна - это ширина окна браузера, а ширина документа - ширина веб-страницы.