How to use outerWidth() Method in JQuery

In this article, I will explain use of outerWidth() Method in JQuery.
  • 2089

JQuery CSS outerWidth() Method

  • outerWidth([margin]) method gets the outer width for the first matched element.
  • outerWidth([margin]) method return width with include the border and padding.
  • outerWidth([margin]) method works for both visible and hidden elements.



  • margin: margin is the optional argument. margin included when set to true the margin of the element.


The following example shows how to outerWidth() method in jquery.



<title>the title</title>

   <script type="text/javascript"


   <script type="text/javascript" language="javascript">

       $(document).ready(function () {

           $("div").click(function () {

               var color = $(this).css("background-color");

               var width = $(this).outerWidth(true);

               $("#result").html("Outer Width is <span>" +

                         width + "</span>.");

               $("#result").css({ 'color': color,

                   'background-color': 'black'






      #div1{ margin:10px;padding:12px;

             border:2px solid #666;


      #div2 { margin:15px;padding:5px;

              border:5px solid #666;


      #div3 { margin:20px;padding:4px;

              border:4px solid #666;


      #div4 { margin:5px;padding:3px;

              border:3px solid #666;





      <h2>outerwidth() Method Exapmle</h2>

   <p>Click on any square for get outer width:</p>

   <span id="result"> </span>

   <div id="div1" style="background-color:red;"></div>

   <div id="div2" style="background-color:Blue;"></div>

   <div id="div3" style="background-color:Silver;"></div>

   <div id="div4" style="background-color:Yellow;"></div>






outer width.jpg

Further Readings

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.