jQuery outerWidth and outerHeight methods

The last pair of methods are outerWidth and outerHeight, with which you can get the width and height of an element taking into account all the padding and borders, or you can ignore the outer padding margin.

Let's look at an example. Let's say we have a paragraph:

<p id="test">text</p>
<p id="out"></p>

CSS looks like this:

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

Let's get the width and height values of the paragraph #test, taking into account the internal indents and borders, for this you need to pass false to these methods or leave the brackets empty (since it is already in the default method):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Now our values will differ by another 4px, since the border thickness is 2px on each side.

Now let's get the width and height values of the paragraph #test, taking into account all the indents and borders. To do this, you need to pass true to the outerWidth and outerHeight methods:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Now our values will differ from the previous ones by another 20px, since our outer margins are 10px on each side.

Complete the solution to the previous tasks - output in the third paragraph under the div #wrapper the values of the width and height of the div #wrapper - taking into account internal paddings and borders, but without external paddings. In the fourth paragraph, output the values of the width and height of the div #wrapper taking into account all paddings and borders.

We can also change the width and height values of elements using the outerWidth and outerHeight methods. For example, let's set the width of the div #test1 to 250px, and the height of #test2 to 200px:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

All of the above methods for working with element sizes also provide the ability to apply the function to each element in the set.