I'm just curious as to what the difference between window.outerWidth and $(window).outerWidth() is, if any.

I couldn't really find much info about this on Google, so I thought I'd appeal to the masses. This is just a general question, not a specific issue.

I'm just curious as to what the difference between window.outerWidth and $(window).outerWidth() is, if any.

I couldn't really find much info about this on Google, so I thought I'd appeal to the masses. This is just a general question, not a specific issue.

• javascript
• jquery

• 7 jQuery is javascript... – AlanFoster Commented Jul 17, 2012 at 20:20
• JS is the core. jQuery is a library written in JS to simplify actions. – Novak Commented Jul 17, 2012 at 20:20
• 1 I meant jQuery vs. traditional JavaScript. Specifically, between those two selectors. – Chad Commented Jul 17, 2012 at 20:21
• 4 Luke, use the source: github./jquery/jquery/blob/master/src/dimensions.js – Matt Ball Commented Jul 17, 2012 at 20:21
• 2 This method is not applicable to window and document objects; for these, use .width() instead. – Ram Commented Jul 17, 2012 at 20:24

4 Answers 4

Jquery's outerWidth:

Returns the width of the element, along with left and right padding, border, and optionally margin, in pixels.

If includeMargin is omitted or false, the padding and border are included in the calculation; if true, the margin is also included.

This method is not applicable to window and document objects; for these, use .width() instead.

window.outerWidth:

window.outerWidth gets the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.

From jQuery documentation (http://api.jquery./outerWidth/):

This method is not applicable to window and document objects; for these, use .width() instead.

So, you should use $(window).width(), which returns:

"width of browser viewport" (so with no window borders and other stuff)

window.outerWidth returns whole window width (with borders and other stuff)

As to the specifics of outerWidth: jQuery's implementation lets you choose if you want the margin included in the measurement or not. Javascript's just gets the number. I couldn't tell if it included margin or not.

jQuery is just a bunch of fancy JavaScript. In fact, you can implement anything jQuery does yourself using only JavaScript (and I'd encourage you to do so)! I'd encourage you to read questions like this one.

As you can read in the jQuery docs:

This method is not applicable to window and document objects; for these, use .width() instead.

While window.outerWidth gets the width of the outside of the browser window, jQuery's .width() method does return the width of browser viewport when called on a window-selecting jQuery instance. To do this, it calls a bunch of subfunctionsand hooks (see source code) to be cross-browser-patible (but is much slower).