Difference between $(window).width() vs $(document).width()
JavascriptJqueryJquery SelectorsDimensionsJavascript Problem Overview
What is the major difference between $(window).width() vs $(document).width() in jQuery?
Whether window denotes the browser and document represents the body of html page? Am I correct ?
Javascript Solutions
Solution 1 - Javascript
From the documentation of width():
> This method is also able to find the width of the window and document. > $(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document
In the demo, I have set html { width: 1000px; }, which is bigger than the viewport.
The width of the body of your HTML page is a third value. $('body').width() can also differ from the other two (try body { margin: 100px; } for example).
Solution 2 - Javascript
You are correct. the window is the viewable area of the browser. The document is the actually body of the page. So your document could extend far beyond the window
Solution 3 - Javascript
> Well, the window is the first thing that gets loaded into the browser.
> This window object has the majority of the properties like length,
> innerWidth, innerHeight, name, if it has been closed, its parents, and
> more.
>
> What about the document object then?
>
> The document object is your html document that will be loaded into the
> browser. The document actually gets loaded inside the window object
> and has properties available to it like title, URL, cookie, etc. What
> does this really mean? That means if you want to access a property for
> the window it is window.property, if it is document it is
> window.document.property which is also available in short as
> document.property.
So in conclusion the document could be smaller than the window.
FROM: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/
Solution 4 - Javascript
$(window).width(); returns the width of browser viewport
$(document).width(); returns width of HTML document
$(document).width() is a bit unreliable, resulting in a lower value for a full-screened browser . $(window).width() is safer.
$(window).width() gets the entire width of the window, including things like the scroll bar .
Solution 5 - Javascript
Another important difference.
$(window).width(); is available before the document loads / is ready
$(document).width(); is only available after the document had loaded
So for the second, you need
$(document).ready(function() {
var w = $(document).width();
});
Solution 6 - Javascript
Yes - width of window is width of browser window, and width of document is width of webpage.