jQuery outerWidth() Method

Quiz

The outerWidth() method in jQuery is used to return the outer width of the first selected element in a jQuery object. It includes the width of the element and any padding, border, and optionally, the margin of the element. It returns the outer width in pixels.

This method accepts an optional parameter named âincludeMarginâ. If this parameter is set to true, it includes the margin. If the jQuery object is empty (i.e., no elements are matched), or if the width cannot be determined, it returns undefined.

Syntax

Following is the syntax of the outerWidth() method in jQuery −

$(selector).outerWidth(includeMargin)

Parameters

This method accepts the following parameters −

selector: A selector expression to find the element(s) whose outer width is to be returned.
includeMargin (optional): A boolean value indicating whether to include the element's margin. Default is false. If true, it includes the margin.

Example 1

In the following example, we are demonstrating the basic usage of the outerWidth() method in jQuery −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                const outerWidth = $("div").outerWidth();
                alert("Outer width of the element: " + outerWidth);
            });
        });
    </script>   
</head>
<body>
    <div style="height:50px; width: 150; padding: 20px; margin: 3px; border: 2px solid black; background-color: yellow;">
        This is a div element.
    </div>
    <button>Get Outer Width</button>
</body>
</html>

When we execute the above program, it returns the outer width of the selected <div> element.

Example 2

In this example, we are multiple <div> elements. So, when the outerWidth() method is triggered, it returns the outer width of the first matched div element

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                const outerWidth = $("#element").outerWidth();
                alert("Outer width of the first selected element: " + outerWidth);
            });
        });
    </script>
</head>
<body>
    <div id="element" style="height: 50; width: 200px; padding: 20px; margin: 3px; border: 2px solid black; background-color: yellow;">
        div element (width: 200px padding: 20px)
    </div>
    <div id="element" style="height: 60; width: 250px; padding: 25px; margin: 3px; border: 2px solid black; background-color: yellow;">
        div element (width: 250px padding: 25px)
    </div>
    <div id="element" style="height: 70; width: 300px; padding: 30px; margin: 3px; border: 2px solid black; background-color: yellow;">
        div element (width: 300px padding: 30px)
    </div>
    <button>Get Outer width of first selected element.</button>
</body>
</html>

When we click the button, it gives the outer width of the first selected <div> element in the matched set.

Example 3

Here, we are passing true as an argument to the outerWidth() method to include the margin in the outer width −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                const outerWidth = $("div").outerWidth(true);
                alert("Outer width of the element (includes padding, border and margin): " + outerWidth);
            });
        });
    </script>   
</head>
<body>
    <div style="height:50px; width: 150; padding: 20px; margin: 3px; border: 2px solid black; background-color: yellow;">
        This is a div element.
    </div>
    <button>Get Outer Width</button>
</body>
</html>

After clicking the button, it returns the outer width of the <div> element including the margin.

jquery_ref_html.htm

Print Page