jQuery outerWidth() Method

jQuery | outerWidth() Method: Learn about the jQuery outerWidth() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 17, 2022

outerWidth() Method

It is very important to know the dimensions of the element that has been placed on the web page. It includes – height, width, outerHeight, outerWidth, etc. For example, the container created, and the images used should have a proper dimension ratio in order to make the web page look more professional. That's why we need to have knowledge of the dimensions over here. So, over here, we'll discuss the outerWidth() method in detail.

The outerWidth() method helps to get the outer width of the selected element. The element whose dimensions have to be known is passed here as a selector, and this method gives the numerical value of the width. The outerWidth() method returns the width including the border, margin, and padding of the element. This method helps return the width of the first matched element.

outerWidth() Method Syntax

$('selector').outerWidth();
$('selector').outerWidth(IncludeMargin);

This method includes one parameter – i.e., include margin or not. It is passed as 'true' or 'false'. If true, then the width is returned including the margin. Otherwise, it does not include the margin. By default, the margin is not included. Below given example shows how the width() method returns the width of the selected image that contains – margin, padding, border, etc.

jQuery outerWidth() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
    <style>
      img{
      border: 10px solid goldenrod;
      padding: 10px;
      margin: 15px;
      }
    </style>
  </head>
  <body>
    <h2>jQuery - Outer Width</h2>
    <p>Click the button to get the Outer Width of the image.</p>
    <button>Outer Width</button>
    <hr>
    <img style="height: 200px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
    <hr>
    <h3></h3>
  </body>
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){       
            var OutWidth = $('img').outerWidth(true);
            $('h3').html('Outer Width of the Image is: ' + OutWidth);
        })
    });
  </script>
</html>

Output:

jQuery innerHeight() Method

jQuery outerHeight() Method

Comments and Discussions!

Load comments ↻