Tutorials Point


  jQuery Tutorial
  jQuery UI
  jQuery References
  jQuery Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

jQuery - outerWidth( [margin] ) Method


previous next AddThis Social Bookmark Button


Advertisements

Description:

The outerWidth( [margin] ) method gets the outer width (includes the border and padding by default) for the first matched element.

This method works for both visible and hidden elements. It is not supported for elements that are indirectly hidden by consequence of a parent being hidden.

Syntax:

Here is the simple syntax to use this method:

selector.outerWidth( [margin] )

Parameters:

Here is the description of all the parameters used by this method:

  • margin: This optional argument when set to true the margin of the element will be included in the calculations.

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.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':'gray'});
    });

   });

   </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>
   <p>Click on any square:</p>
   <span id="result"> </span>
   <div id="div1" style="background-color:blue;"></div>
   <div id="div2" style="background-color:pink;"></div>
   <div id="div3" style="background-color:#123456;"></div>
   <div id="div4" style="background-color:#f11;"></div>
</body>
</html>

To understand it in better way you can Try it yourself.



previous next Printer Friendly

Advertisements


  

Advertisements