Jquery widths and heights

Jquery has three width and height functions. The basic function will give back the value of the width or height of an object.

/* width of an object */ $('p').width(); $(document).width(); $(window).height(); $('#element').height();

The second jquery width and height function gives the calculated value of the width of an element plus its padding. This is called innerWidth and innerHeight.

/* width + padding of an object */ $('p').innerWidth(); $(document).innerWidth(); $(window).innerHeight(); $('#element').innerHeight();

The third jquery width and height function is called outerWidth and outerHeight. This function returns the calculated value of the width plus padding plus border of an element. This is more inline with the current box model specification.

/* width + padding + border of an object */ $('p').outerWidth(); $(document).outerWidth(); $(window).outerHeight(); $('#element').outerHeight();

One caveat to look out for is that images in certain browsers have zero width and height until the image has fully loaded. Therefore if you use the jquery width and height functions after the dom has loaded but before an image has loaded, it will return zero. This can be avoided using the load method to ensure an image has loaded.

$('#anImage').load(function() { var height = $(this).outerHeight(); });