jQuery — Dimensions

width() and height()

var w = $("div").width();    // Content width
var h = $("div").height();   // Content height

// Set
$("div").width(300);
$("div").height(200);

innerWidth() and innerHeight()

Includes padding but not border:

var iw = $("div").innerWidth();
var ih = $("div").innerHeight();

outerWidth() and outerHeight()

Includes padding and border:

var ow = $("div").outerWidth();
var oh = $("div").outerHeight();

// Include margin
var omw = $("div").outerWidth(true);
var omh = $("div").outerHeight(true);

Width/Height vs CSS

Method	Returns
.width()	Number (px)
.css("width")	String ("200px")

Position

var offset = $("div").offset();
console.log(offset.top, offset.left); // Relative to document

var pos = $("div").position();
console.log(pos.top, pos.left); // Relative to offset parent

Scroll Position

var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();

Dimension Summary

Method	Includes
width() / height()	Content only
innerWidth / innerHeight	+ Padding
outerWidth / outerHeight	+ Border
outerWidth(true)	+ Margin

Mini Practice

1. Get an element's width and height
2. Set dimensions with width() and height()
3. Get the offset position
4. Check window scroll position

Up Next

Continue with Traversing — navigating the DOM tree.