Working with widths and heights

jQuery makes it easy for you to work with the dimensions of your elements and even the browser window. You can use the width() and height() methods for finding the dimensions, or alternatively the innerWidth()/innerHeight()/outerWidth()/outerHeight() methods, depending on the measurements you need. First a little example illustrating the differences and the some explanation:

<a href="javascript:void(0);" onclick="ShowElementDimensions();">Show element dimensions</a>
<div id="divTestArea1" style="height: 100px; width: 400px; padding: 20px; margin: 3px; border: 1px solid silver; background-color: #eee;"></div>

<script type="text/javascript">
function ShowElementDimensions()
{
	var result = "";
	
	result += "Dimensions of div: " + $("#divTestArea1").width() + "x" + $("#divTestArea1").height() + "</br>";
	result += "Inner dimensions of div: " + $("#divTestArea1").innerWidth() + "x" + $("#divTestArea1").innerHeight() + "</br>";	
	result += "Outer dimensions of div: " + $("#divTestArea1").outerWidth() + "x" + $("#divTestArea1").outerHeight() + "</br>";	
	result += "Outer dimensions of div (with margin): " + $("#divTestArea1").outerWidth(true) + "x" + $("#divTestArea1").outerHeight(true) + "</br>";	
	
	$("#divTestArea1").html(result);
}
</script>

The example is quite simple. We have a div element with extra padding, extra margin and a border. When we click the link, we use the width()/height(), innerWidth()/innerHeight() and outerWidth()/outerHeight() methods to show the dimensions of the element.

The width() and height() is simply the computed size of the element. If you use innerWidth() and innerHeight(), padding is included in the returned values. If you use the outerWidth() and outerHeight() methods, both padding and border is included in the returned values. These last methods take an optional boolean parameter which tells jQuery whether or not to include the margin as well, as you can see from the example.

The width() and height() methods can also be used to get the current dimensions of the browser window:

<a href="javascript:void(0);" onclick="ShowBrowserDimensions();">Show browser dimensions</a>

<script type="text/javascript">
function ShowBrowserDimensions()
{
	alert("Dimensions of document: " + $(document).width() + "x" + $(document).height());
	alert("Dimensions of window: " + $(window).width() + "x" + $(window).height());
}
</script>

We check the width and height for both the document (the HTML document) and the window (the browser viewport), since these may or may not differ.

Both the width() and the height() methods can also be used to set new dimensions for an element, simply by providing a parameter with the new value. Check out this example:

<a href="javascript:void(0);" onclick="ResizeElement();">Resize element</a>
<div id="divTestArea3" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">

<script type="text/javascript">
function ResizeElement()
{
	$("#divTestArea3").width(150).height(50);
}
</script>