How to use outerWidth() Method in JQuery

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

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.

Syntax

$(selector).outerwidth([margin])

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

Example

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

<html>

<head>

<title>the title</title>

   <script type="text/javascript"

   src="JScript.js"></script>

   <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'

               });

          });

       });

   </script>

   <style>

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

             border:2px solid #666;

             width:60px;}

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

              border:5px solid #666;

              width:60px;}

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

              border:4px solid #666;

              width:60px;}

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

              border:3px solid #666;

              width:60px;}

  </style>

</head>

<body>

      <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>

</body>

</html>

 

Output

 

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

© 2019 DotNetHeaven. All rights reserved.