window.outerWidth VS $(window).outerWidth()

Question

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.

JS is the core. jQuery is a library written in JS to simplify actions. — Novak, Jul 17 '12 at 20:20
I meant jQuery vs. traditional JavaScript. Specifically, between those two selectors. — Chad, Jul 17 '12 at 20:21
Luke, use the source: https://github.com/jquery/jquery/blob/master/src/dimensions.js — Matt Ball, Jul 17 '12 at 20:21
[_This method is not applicable to window and document objects; for these, use .width() instead._](http://api.jquery.com/outerWidth/) — Ram, Jul 17 '12 at 20:24
@AlanFoster jQuery is *not* JavaScript. jQuery is *written* in JavaScript. — mwcz, Jul 17 '12 at 20:26

score 6 · Accepted Answer · answered Jul 17 '12 at 20:23

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.

score 2 · Answer 2 · answered Jul 17 '12 at 20:25

From jQuery documentation (http://api.jquery.com/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)

Bergi · Answer 3 · 2012-07-17T20:31:57.877

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-compatible (but is much slower).

score 0 · Answer 4 · edited May 23 '17 at 12:20

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.

window.outerWidth VS $(window).outerWidth()

4 Answers4

Linked

Related