Difference between width and outerWidth in jQuery

You can use the width() method in jQuery for horizontal measurement of an element such as a DIV. The width() method excludes padding, margin or border of the element. Whereas, the outerWidth() method (which too measures the element horizontally), includes padding, borders and (optionally) margins.

Difference between jQuery Datepicker width and outerWidth methods

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>

Try it

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.

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>

Try it

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.

← PreviousNext →