jQuery Dimensions - Get and Set Element Sizes with Ease

1. jQuery Dimensions Overview

jQuery offers a powerful set of dimensions methods to measure or set the size of elements with minimal code as compared to JavaScript. Whether you need to get computed dimensions or adjust them dynamically, these methods provide a consistent, easy to configure, and chainable API.

1.1. Key Uses of Dimensions Methods

• .height(): Sets or returns the height of selected elements.
• .innerHeight(): Returns the height of an element (includes padding, but not border).
• .innerWidth(): Returns the width of an element (includes padding, but not border).
• .width(): Sets or returns the width of selected elements.
• .outerHeight(): Returns the height of an element (includes padding and border).
• .outerWidth(): Returns the width of an element (includes padding and border).

2. Get or Set Element Height with height()

Use height() method to read or assign the height (in pixels) of matched elements.

$(function() {
	$('#getHeightBtn').click(function () {
		const h = $('#content').height();
		$('#infoBox').text('Height: ' + h + 'px');
	});
	$('#setHeightBtn').click(function () {
		$('#content').height(200);
		$('#infoBox').text('Height set to 200px');
	});
});

3. Get or Set Inner Height with innerHeight()

Use innerHeight() method to read or assign the inner height (including padding, excluding border and margin) of matched elements.

$(function() {
	$('#getInnerHeightBtn').click(function () {
		const ih = $('#content').innerHeight();
		$('#infoBox').text('innerHeight: ' + ih + 'px');
	});
	$('#setInnerHeightBtn').click(function () {
		$('#content').innerHeight(200);
		$('#infoBox').text('innerHeight set to 200px');
	});
});

4. Get or Set Element Width with width()

Use width() method to read or assign the width (in pixels) of matched elements.

$(function() {
	$('#getWidthBtn').click(function () {
		const w = $('#content').width();
		$('#infoBox').text('width: ' + w + 'px');
	});
	$('#setWidthBtn').click(function () {
		$('#content').width(300);
		$('#infoBox').text('width set to 300px');
	});
});

5. Get or Set Inner Width with innerWidth()

Use innerWidth() method to read or assign the inner width (including padding, excluding border and margin) of matched elements.

$(function() {
	$('#getInnerWidthBtn').click(function () {
		const iw = $('#content').innerWidth();
		$('#infoBox').text('innerWidth: ' + iw + 'px');
	});
	$('#setInnerWidthBtn').click(function () {
		$('#content').innerWidth(300);
		$('#infoBox').text('innerWidth set to 300px');
	});
});

6. Get Outer Height with outerHeight()

Use outerHeight() method to read the outer height (including padding and border) of matched elements.

6.1. Getting Outer Height without Margin

The outerHeight() method returns the outer height of an element, including padding and border, but excluding margin by default.

$(function() {
	$('#getOuterHeightBtn').click(function () {
		const oh = $('#content').outerHeight();
		$('#infoBox').text('outerHeight: ' + oh + 'px');
	});
});

6.2. Getting Outer Height with Margin

To include the margin in the outer height calculation, pass true as an argument to the outerHeight() method.

$(function() {
	$('#getOuterHeightBtn').click(function () {
		const oh = $('#content').outerHeight(true);
		$('#infoBox').text('outerHeight: ' + oh + 'px');
	});
});

7. Get Outer Width with outerWidth()

Use outerWidth() method to read the outer width (including padding and border) of matched elements.

7.1. Getting Outer Width without Margin

The outerWidth() method returns the outer width of an element, including padding and border, but excluding margin by default.

$(function() {
	$('#getOuterWidthBtn').click(function () {
		const ow = $('#content').outerWidth();
		$('#infoBox').text('outerWidth: ' + ow + 'px');
	});
});

7.2. Getting Outer Width with Margin

To include the margin in the outer width calculation, pass true as an argument to the outerWidth() method.

$(function() {
	$('#getOuterWidthBtn').click(function () {
		const ow = $('#content').outerWidth(true);
		$('#infoBox').text('outerWidth: ' + ow + 'px');
	});
});