javascript - div - width css

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

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

Bueno, la window es lo primero que se carga en el navegador. Este objeto de 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 del document es su documento html que se cargará en el navegador. El document realmente se carga dentro del objeto window y tiene propiedades disponibles como título, URL, cookie, etc. ¿Qué significa esto realmente? Esto significa que si desea acceder a una propiedad para la window , es window.property , si es un document , es window.document.property que también está disponible en breve como document.property .

Entonces, 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/

De la documentación de width() :

Este método también puede encontrar el ancho de la ventana y el documento.
$(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document

Demostración jsFiddle simple

En la demostración, he configurado html { width: 1000px; } html { width: 1000px; } , que es más grande que la ventana gráfica.

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).

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

Otra diferencia importante.

$(window).width(); está disponible antes de que el documento se cargue / esté listo

$(document).width(); solo está disponible después de que el documento se haya cargado

Entonces para el segundo, necesitas

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

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.

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

$(document).width(); devuelve el ancho del documento HTML

$(document).width() es un poco poco confiable, lo que resulta en un valor menor para un navegador de pantalla completa. $ (ventana) .width () es más seguro.

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