In this article we will learn how to get outer Width of html elements or how to use outerWidth() method in jQuery with example.


jQuery outerWidth() method is used to return the outer width of the first matched html element with padding and border. The jQuery outerWidth() method works for both visible and hidden html elements.

Let’s see, Example of jQuery outerWidth() method

<!DOCTYPE html>
<html xmlns="">
    <title>Example of jQuery outerWidth method</title>
    <script type="text/javascript" src=""></script>
        $(document).ready(function () {
            $("button").click(function () {
                $('p').text("Outer width of div is: "+ $("div").outerWidth());
    <div style="height:100px;width:300px;padding:10px;margin:3px;
     border:1px solid blue;background-color:lightpink;"></div><br>
    <button>Click here to get the outer width of the div</button>  <br />

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like