Diferencia entre $ (ventana) .width() vs $ (documento) .width()

Question

¿Cuál es la diferencia principal entre $(window).width() vs en jQuery? Si la ventana denota el navegador y el documento representa el cuerpo de la página html? Estoy en lo correcto ?

Answer 1

Desde el documentation of width():

Este método también es capaz de encontrar el ancho de la ventana y documento.

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

Simple jsFiddle Demo

En la demo, yo he puesto html { width: 1000px; }, que es más grande que el área de visualización.

El ancho del cuerpo de su página HTML es un tercer valor. $('body').width() también puede diferir de los otros dos (intente body { margin: 100px; } por ejemplo).

Answer 2

Sí: el ancho de la ventana es el ancho de la ventana del navegador y el ancho del documento es el ancho de la página web.

Answer 3

Estás en la correcta. el window es el área visible del navegador. El document es el cuerpo real de la página. Por lo que su document podría extenderse mucho más allá de la window

Answer 4

$(window).width(); devuelve el ancho de la ventana del navegador

$(document).width(); Devuelve la anchura del documento HTML

$(document).width() es un poco fiable, lo que resulta en un valor más bajo para una completa-seleccionados navegador. $ (ventana) .width() es más seguro.

$(window).width() obtiene todo el ancho de la ventana, incluidos elementos como la barra de desplazamiento.

Answer 5

Bueno, el window es lo primero que se carga en el navegador. Este objeto window tiene la mayoría de las propiedades como length, innerWidth, innerHeight, name, si se ha cerrado, sus padres, y más.

¿Qué pasa con el objeto del documento?

El objeto document es su documento html que se cargará en el navegador . El document en realidad se carga dentro del objeto window y tiene propiedades disponibles como título, URL, cookie, etc. ¿Qué significa realmente ? Esto significa que si desea tener acceso a una propiedad de la window es window.property, si es document es window.document.property que también está disponible en más corto document.property.

Por lo tanto, en conclusión, el documento podría ser más pequeño que la ventana.

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

Answer 6

Otra diferencia importante.

$(window).width(); está disponible antes de la carga de documentos/está listo

$(document).width(); sólo está disponible después de que el documento había cargado

Así que para la segunda, necesita

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