The best way to understand the difference is using examples.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>jQuery width() and outerWidth() Methods</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id='container' style='width: 200px;'>
Hello, I am Arun :-)
</div>
<p>
<input type='button' id='bt' value='Click it'>
</p>
</body>
<script>
$(document).ready(function () {
$('#bt').click(function () {
let w = $('#container').width();
let ow = $('#container').outerWidth();
alert('Width: ' + w + ' and outerWidth: ' + ow);
});
});
</script>
</html>If you see the output, the width and the outerWidth of the <div> will be the same. In-fact, what we get is just the width of the <div> element. Although, I have defined a width (200px) to the <div>, you can try without defining any width and it will check with default values.
Difference between jQuery .empty() and .remove() Methods
The jQuery .width() method, measures an element horizontally, which excludes any padding, margin or borders. However, if you have defined padding, borders or margins to an element then the outerWidth() method will show a different figure (measurement) of that element.
Example 2
Here, I have defined padding, borders and margins to the <div> element, along with width. The figures will now be different.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Difference between jQuery width() and outerWidth()</title>
</head>
<body>
<div id='container' style='padding: 20px 5px; margin: 10px; border: solid 1px #3d3d3d; width: 200px;'>
Text inside the DIV element.
</div>
<p>
<input type='button' id='bt' value='Click it'>
</p>
</body>
<script>
$(document).ready(function () {
$('#bt').click(function () {
let w = $('#container').width();
let ow = $('#container').outerWidth(true);
alert('Width: ' + w + ' and outerWidth: ' + ow);
});
});
</script>
</html>The example here, puts more weight on the outerWidth() method. Unlike the previous example, the method in this example has a parameter, a Boolean true value. The true will indicate if margins are included, along with padding, borders and width.
If you don’t want the margins in the total figure, you can define false or don’t define anything at all.
It just made things easy. Thanks for reading ☺.