The outerWidth method

The outerWidth method allows you to get and change the width of an element taking into account the internal padding, border and, selectively, the external padding of the element. It is important to remember that we will get 'calculated value' width. Errors in calculation can also occur if the user changes the page dimensions, or if the element or its parent is hidden.

Syntax

This is how we can get the width of an element. This method can take an optional parameter in the form of true or false (false is the default), depending on whether the outer padding will be taken into account or not. In some cases, the resulting values can be fractional:

$(selector).outerWidth([including_margin]);

To change the width of an element, you can simply pass a number (for example, 400), then the units of measurement will be pixels, or a string indicating the units of measurement (for example, '10em'):

$(selector).outerWidth(new value, [including_margin]);

We can also apply the given function to each element in the set. In this case, the function will receive the number of the element in the set as the first parameter, and the current value of the given width for a specific element as the second parameter. this inside the function will point to the current element. The value of the element's width will change to the one returned by the function:

$(selector).outerWidth(function(number in set, current width value));

Example

For comparison, let's display information about the width of the paragraph #test, obtained by the methods width, innerWidth and outerWidth:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

The outerWidth method

Syntax

Example

See also