Difference between $(window).width() vs $(document).width()

Question

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 ?

@PizzaiolaGorgonzola could you please explain about this " but it should not be used to structure your code, it encourages to write opaque, unreadable, hard to maintain, not object oriented code." — kbvishnu, Jul 21 '14 at 13:44

kapa · Accepted Answer · 2012-02-24T13:02:26.720

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

Simple jsFiddle Demo

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

score 22 · Answer 2 · answered Feb 24 '12 at 12:51

22

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

answered Feb 24 '12 at 12:51

Henesnarfel

2,129
1
16
18

SO why is the demo on jquery showing a window width smaller than browser width? http://screencast.com/t/PlTXAShwmeP7 – AlxVallejo Oct 03 '12 at 22:21
@AlxVallejo if you look at the source you can see that the demo code is running in an iFrame that has the width of 568px. – Henesnarfel Oct 08 '12 at 19:13
1

the `document` could extend far beyond the `window` made things clear for me. – inquisitive May 08 '15 at 13:10

score 8 · Answer 3 · edited Jul 09 '13 at 09:15

8

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/

edited Jul 09 '13 at 09:15

kapa

77,694
21
158
175

answered Feb 24 '12 at 12:52

Rick Hoving

3,585
3
29
49

Well, your aspx or php will still output an HTML document. It does not make a difference which language was used to create HTML. – kapa Feb 24 '12 at 13:00
That's true those languages are server side. Edited it tnx. – Rick Hoving Feb 24 '12 at 13:06
2

@Rick you should reference quotes, it's both useful and ethical: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/ – Tom W Hall Nov 23 '12 at 03:51
@TomHall Your right about that, added the link were I got the data from. – Rick Hoving Nov 23 '12 at 10:12

score 4 · Answer 4 · answered Mar 18 '14 at 11:10

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();
});

Mouna Cheikhna · Answer 5 · 2012-02-24T13:04:27.010

4

$(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 .

edited Feb 24 '12 at 13:04

answered Feb 24 '12 at 12:51

Mouna Cheikhna

38,870
10
48
69

score 2 · Answer 6 · answered Feb 24 '12 at 12:50

2

Yes - width of window is width of browser window, and width of document is width of webpage.

answered Feb 24 '12 at 12:50

Mateusz W

1,981
1
14
16

Difference between $(window).width() vs $(document).width()

6 Answers6

Linked